diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 0796e9af9..ec1f35e51 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -66,7 +66,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="AddressEdit-root-id"
       >
         <div>
           <div
@@ -144,10 +144,10 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="AddressEdit-root-id"
       >
         <div>
           <div
@@ -225,7 +225,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <div
         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -263,7 +263,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <div
         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -301,10 +301,10 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="AddressEdit-root-id"
       >
         <div>
           <div
@@ -382,14 +382,14 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="AddressEdit-root-id"
       >
         <div>
           <div
-            class="makeStyles-container-id"
+            class="SingleAutocompleteSelectField-container-id"
           >
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -544,7 +544,7 @@ exports[`Storyshots Generics / AddressFormatter when loading 1`] = `
       class="MuiCardContent-root-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
       >
         ‌
       </span>
@@ -589,7 +589,7 @@ exports[`Storyshots Generics / Autocomplete Menu default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="AutocompleteSelectMenu-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -644,7 +644,7 @@ exports[`Storyshots Generics / Autocomplete Menu error 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="AutocompleteSelectMenu-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -705,7 +705,7 @@ exports[`Storyshots Generics / Autocomplete Menu interactive 1`] = `
     >
       <form>
         <div
-          class="makeStyles-container-id"
+          class="AutocompleteSelectMenu-container-id"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -761,7 +761,7 @@ exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="AutocompleteSelectMenu-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -831,7 +831,7 @@ exports[`Storyshots Generics / Card menu default 1`] = `
     <button
       aria-haspopup="true"
       aria-label="More"
-      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+      class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
       tabindex="0"
       type="button"
     >
@@ -867,12 +867,12 @@ exports[`Storyshots Generics / Checkbox checked 1`] = `
       class="MuiCardContent-root-id"
     >
       <button
-        class="MuiButtonBase-root-id makeStyles-root-id"
+        class="MuiButtonBase-root-id Checkbox-root-id"
         tabindex="0"
         type="button"
       >
         <input
-          class="makeStyles-box-id makeStyles-checked-id"
+          class="Checkbox-box-id Checkbox-checked-id"
           name="data"
           type="checkbox"
           value="true"
@@ -895,13 +895,13 @@ exports[`Storyshots Generics / Checkbox disabled 1`] = `
       class="MuiCardContent-root-id"
     >
       <button
-        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
         disabled=""
         tabindex="-1"
         type="button"
       >
         <input
-          class="makeStyles-box-id makeStyles-disabled-id"
+          class="Checkbox-box-id Checkbox-disabled-id"
           disabled=""
           name="data"
           type="checkbox"
@@ -926,12 +926,12 @@ exports[`Storyshots Generics / Checkbox interactive 1`] = `
     >
       <form>
         <button
-          class="MuiButtonBase-root-id makeStyles-root-id"
+          class="MuiButtonBase-root-id Checkbox-root-id"
           tabindex="0"
           type="button"
         >
           <input
-            class="makeStyles-box-id"
+            class="Checkbox-box-id"
             name="data"
             type="checkbox"
             value="false"
@@ -955,12 +955,12 @@ exports[`Storyshots Generics / Checkbox unchecked 1`] = `
       class="MuiCardContent-root-id"
     >
       <button
-        class="MuiButtonBase-root-id makeStyles-root-id"
+        class="MuiButtonBase-root-id Checkbox-root-id"
         tabindex="0"
         type="button"
       >
         <input
-          class="makeStyles-box-id"
+          class="Checkbox-box-id"
           name="data"
           type="checkbox"
           value="false"
@@ -983,12 +983,12 @@ exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
       class="MuiCardContent-root-id"
     >
       <button
-        class="MuiButtonBase-root-id makeStyles-root-id"
+        class="MuiButtonBase-root-id Checkbox-root-id"
         tabindex="0"
         type="button"
       >
         <input
-          class="makeStyles-box-id makeStyles-indeterminate-id"
+          class="Checkbox-box-id Checkbox-indeterminate-id"
           name="data"
           type="checkbox"
           value="false"
@@ -1011,10 +1011,10 @@ exports[`Storyshots Generics / Chip default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="Chip-root-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
         >
           Lorem Ipsum
         </div>
@@ -1036,15 +1036,15 @@ exports[`Storyshots Generics / Chip with x 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="Chip-root-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
         >
           Lorem Ipsum
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root-id makeStyles-closeIcon-id"
+            class="MuiSvgIcon-root-id Chip-closeIcon-id"
             focusable="false"
             role="presentation"
             viewBox="0 0 24 24"
@@ -1287,10 +1287,10 @@ exports[`Storyshots Generics / EditableTableCell default 1`] = `
                 Some value
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-container-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id EditableTableCell-container-id"
               >
                 <div
-                  class="MuiTypography-root-id makeStyles-text-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id EditableTableCell-text-id MuiTypography-caption-id"
                 >
                   Some editable text
                 </div>
@@ -1342,7 +1342,7 @@ exports[`Storyshots Generics / External Link default 1`] = `
       class="MuiCardContent-root-id"
     >
       <a
-        class="makeStyles-link-id"
+        class="ExternalLink-link-id"
         href="http://www.google.com"
       >
         <div
@@ -1368,7 +1368,7 @@ exports[`Storyshots Generics / External Link new tab 1`] = `
       class="MuiCardContent-root-id"
     >
       <a
-        class="makeStyles-link-id"
+        class="ExternalLink-link-id"
         href="http://www.google.com"
         target="_blank"
       >
@@ -1395,7 +1395,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -1407,7 +1407,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           <div
             aria-haspopup="listbox"
             aria-labelledby=" "
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id makeStyles-input-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id FilterContent-input-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
             role="button"
             tabindex="0"
           >
@@ -1588,7 +1588,7 @@ exports[`Storyshots Generics / MultiSelectField interactive 1`] = `
     >
       <form>
         <div
-          class="MuiFormControl-root-id makeStyles-formControl-id"
+          class="MuiFormControl-root-id MultiSelectField-formControl-id"
         >
           <label
             class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -1650,7 +1650,7 @@ exports[`Storyshots Generics / MultiSelectField with error hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <div
           class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-error-id MuiFilledInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -1705,7 +1705,7 @@ exports[`Storyshots Generics / MultiSelectField with hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <div
           class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -1760,7 +1760,7 @@ exports[`Storyshots Generics / MultiSelectField with label 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -1816,7 +1816,7 @@ exports[`Storyshots Generics / MultiSelectField with label and hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -1877,7 +1877,7 @@ exports[`Storyshots Generics / MultiSelectField with no value 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <div
           class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -1927,7 +1927,7 @@ exports[`Storyshots Generics / MultiSelectField with value 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <div
           class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -1975,7 +1975,7 @@ exports[`Storyshots Generics / MultiSelectField with value, label and hint 1`] =
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id MultiSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -2047,12 +2047,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id makeStyles-checked-id"
+                class="Checkbox-box-id Checkbox-checked-id"
                 type="checkbox"
                 value="true"
               />
@@ -2064,7 +2064,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             </span>
           </div>
           <hr
-            class="makeStyles-root-id MultiAutocompleteSelectFieldContent-hr-id"
+            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
           />
           <div
             aria-disabled="false"
@@ -2074,12 +2074,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2098,12 +2098,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2122,12 +2122,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2146,12 +2146,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2170,12 +2170,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2194,12 +2194,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2218,12 +2218,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2242,12 +2242,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2266,12 +2266,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2290,12 +2290,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2307,7 +2307,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1
             </span>
           </div>
           <hr
-            class="makeStyles-root-id MultiAutocompleteSelectFieldContent-hr-id"
+            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
           />
           <div
             class="MultiAutocompleteSelectFieldContent-progressContainer-id"
@@ -2375,12 +2375,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id makeStyles-checked-id"
+                class="Checkbox-box-id Checkbox-checked-id"
                 type="checkbox"
                 value="true"
               />
@@ -2392,7 +2392,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             </span>
           </div>
           <hr
-            class="makeStyles-root-id MultiAutocompleteSelectFieldContent-hr-id"
+            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
           />
           <div
             aria-disabled="false"
@@ -2402,12 +2402,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2426,12 +2426,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2450,12 +2450,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2474,12 +2474,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2498,12 +2498,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2522,12 +2522,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2546,12 +2546,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2570,12 +2570,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2594,12 +2594,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2618,12 +2618,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id"
+                class="Checkbox-box-id"
                 type="checkbox"
                 value="false"
               />
@@ -2664,7 +2664,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`]
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="MultiAutocompleteSelectField-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2729,21 +2729,21 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`]
         </div>
       </div>
       <div
-        class="makeStyles-chipContainer-id"
+        class="MultiAutocompleteSelectField-chipContainer-id"
       >
         <div
-          class="makeStyles-chip-id"
+          class="MultiAutocompleteSelectField-chip-id"
         >
           <div
-            class="makeStyles-chipInner-id"
+            class="MultiAutocompleteSelectField-chipInner-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
             >
               Afghanistan
             </div>
             <button
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
               tabindex="0"
               type="button"
             >
@@ -2783,7 +2783,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="MultiAutocompleteSelectField-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2848,21 +2848,21 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit
         </div>
       </div>
       <div
-        class="makeStyles-chipContainer-id"
+        class="MultiAutocompleteSelectField-chipContainer-id"
       >
         <div
-          class="makeStyles-chip-id"
+          class="MultiAutocompleteSelectField-chip-id"
         >
           <div
-            class="makeStyles-chipInner-id"
+            class="MultiAutocompleteSelectField-chipInner-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
             >
               Afghanistan
             </div>
             <button
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
               tabindex="0"
               type="button"
             >
@@ -2902,7 +2902,7 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-container-id"
+        class="MultiAutocompleteSelectField-container-id"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2967,21 +2967,21 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit
         </div>
       </div>
       <div
-        class="makeStyles-chipContainer-id"
+        class="MultiAutocompleteSelectField-chipContainer-id"
       >
         <div
-          class="makeStyles-chip-id"
+          class="MultiAutocompleteSelectField-chip-id"
         >
           <div
-            class="makeStyles-chipInner-id"
+            class="MultiAutocompleteSelectField-chipInner-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
             >
               Afghanistan
             </div>
             <button
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
               tabindex="0"
               type="button"
             >
@@ -3034,12 +3034,12 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
             tabindex="-1"
           >
             <button
-              class="MuiButtonBase-root-id makeStyles-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
+              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
               tabindex="0"
               type="button"
             >
               <input
-                class="makeStyles-box-id makeStyles-checked-id"
+                class="Checkbox-box-id Checkbox-checked-id"
                 type="checkbox"
                 value="true"
               />
@@ -3065,7 +3065,7 @@ exports[`Storyshots Generics / PageHeader with title 1`] = `
     class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
-      class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
     >
       Lorem ipsum
     </div>
@@ -3073,7 +3073,7 @@ exports[`Storyshots Generics / PageHeader with title 1`] = `
       class="ExtendedPageHeader-action-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="PageHeader-root-id"
       />
     </div>
   </div>
@@ -3088,7 +3088,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
     class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
-      class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
     >
       Lorem ipsum
     </div>
@@ -3096,7 +3096,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
       class="ExtendedPageHeader-action-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="PageHeader-root-id"
       >
         <button
           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -3133,10 +3133,10 @@ exports[`Storyshots Generics / PageHeader without title 1`] = `
     class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
   >
     <div
-      class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
         style="width:10em"
       >
         ‌
@@ -3146,7 +3146,7 @@ exports[`Storyshots Generics / PageHeader without title 1`] = `
       class="ExtendedPageHeader-action-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="PageHeader-root-id"
       />
     </div>
   </div>
@@ -3182,10 +3182,10 @@ exports[`Storyshots Generics / PhoneField default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id"
+        class="PhoneField-root-id"
       >
         <div
-          class="MuiFormControl-root-id makeStyles-formControl-id"
+          class="MuiFormControl-root-id SingleSelectField-formControl-id"
         >
           <label
             class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -3197,7 +3197,7 @@ exports[`Storyshots Generics / PhoneField default 1`] = `
             <div
               aria-haspopup="listbox"
               aria-labelledby=" mui-component-select-phone_prefix"
-              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
               id="mui-component-select-phone_prefix"
               role="button"
               tabindex="0"
@@ -3347,7 +3347,7 @@ exports[`Storyshots Generics / Price input with currency symbol 1`] = `
             type="number"
           />
           <div
-            class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
           >
             <div
               class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -3655,7 +3655,7 @@ exports[`Storyshots Generics / Price input with value, label, currency symbol an
             value="30"
           />
           <div
-            class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
           >
             <div
               class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -3720,7 +3720,7 @@ exports[`Storyshots Generics / Price input with value, label, currency symbol an
             value="30"
           />
           <div
-            class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
           >
             <div
               class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -3766,13 +3766,13 @@ exports[`Storyshots Generics / Rich text editor default 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id makeStyles-scroll-id"
+        class="RichTextEditor-root-id RichTextEditor-scroll-id"
       >
         <div
-          class="makeStyles-input-id"
+          class="RichTextEditor-input-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+            class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
           >
             Content
           </div>
@@ -3797,7 +3797,7 @@ Ctrl + B"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                    class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -3818,7 +3818,7 @@ Ctrl + I"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                    class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -4022,7 +4022,7 @@ Ctrl + K"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                    class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -4442,7 +4442,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             Antigua and Barbuda
           </div>
           <hr
-            class="makeStyles-root-id SingleAutocompleteSelectFieldContent-hr-id"
+            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
           />
           <div
             class="SingleAutocompleteSelectFieldContent-progressContainer-id"
@@ -4623,7 +4623,7 @@ exports[`Storyshots Generics / Select with autocomplete interactive 1`] = `
     >
       <form>
         <div
-          class="makeStyles-container-id"
+          class="SingleAutocompleteSelectField-container-id"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4706,7 +4706,7 @@ exports[`Storyshots Generics / Select with autocomplete interactive with custom
     >
       <form>
         <div
-          class="makeStyles-container-id"
+          class="SingleAutocompleteSelectField-container-id"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4789,7 +4789,7 @@ exports[`Storyshots Generics / Select with autocomplete interactive with empty o
     >
       <form>
         <div
-          class="makeStyles-container-id"
+          class="SingleAutocompleteSelectField-container-id"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4872,7 +4872,7 @@ exports[`Storyshots Generics / Select with autocomplete interactive with load mo
     >
       <form>
         <div
-          class="makeStyles-container-id"
+          class="SingleAutocompleteSelectField-container-id"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4987,7 +4987,7 @@ exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
@@ -4999,7 +4999,7 @@ exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
           <div
             aria-haspopup="listbox"
             aria-labelledby=" "
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
             role="button"
             tabindex="0"
           >
@@ -5060,7 +5060,7 @@ exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -5072,7 +5072,7 @@ exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
           <div
             aria-haspopup="listbox"
             aria-labelledby=" "
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
             role="button"
             tabindex="0"
           >
@@ -5133,7 +5133,7 @@ exports[`Storyshots Generics / SingleSelectField with label 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -5203,7 +5203,7 @@ exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -5278,7 +5278,7 @@ exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
@@ -5290,7 +5290,7 @@ exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
           <div
             aria-haspopup="listbox"
             aria-labelledby=" "
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
             role="button"
             tabindex="0"
           >
@@ -5346,7 +5346,7 @@ exports[`Storyshots Generics / SingleSelectField with value 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -5358,7 +5358,7 @@ exports[`Storyshots Generics / SingleSelectField with value 1`] = `
           <div
             aria-haspopup="listbox"
             aria-labelledby=" "
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
             role="button"
             tabindex="0"
           >
@@ -5412,7 +5412,7 @@ exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`]
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiFormControl-root-id makeStyles-formControl-id"
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -5485,7 +5485,7 @@ exports[`Storyshots Generics / Skeleton default 1`] = `
       class="MuiCardContent-root-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
       >
         ‌
       </span>
@@ -5506,7 +5506,7 @@ exports[`Storyshots Generics / StatusLabel when error 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id undefined makeStyles-errorDot-id"
+        class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
       >
         Example label
       </div>
@@ -5527,7 +5527,7 @@ exports[`Storyshots Generics / StatusLabel when neutral 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+        class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
       >
         Example label
       </div>
@@ -5548,7 +5548,7 @@ exports[`Storyshots Generics / StatusLabel when success 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-root-id undefined makeStyles-successDot-id"
+        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
       >
         Example label
       </div>
@@ -5578,20 +5578,20 @@ exports[`Storyshots Generics / Table header ascending 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Name
                 </div>
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -5611,14 +5611,14 @@ exports[`Storyshots Generics / Table header ascending 1`] = `
               </div>
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id"
+                class="TableCellHeader-labelContainer-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Type
                 </div>
@@ -5671,20 +5671,20 @@ exports[`Storyshots Generics / Table header descending 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Name
                 </div>
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root-id makeStyles-arrow-id"
+                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -5704,14 +5704,14 @@ exports[`Storyshots Generics / Table header descending 1`] = `
               </div>
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id"
+                class="TableCellHeader-labelContainer-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Type
                 </div>
@@ -5764,20 +5764,20 @@ exports[`Storyshots Generics / Table header interactive 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Name
                 </div>
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -5797,14 +5797,14 @@ exports[`Storyshots Generics / Table header interactive 1`] = `
               </div>
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
               scope="col"
             >
               <div
-                class="makeStyles-labelContainer-id"
+                class="TableCellHeader-labelContainer-id"
               >
                 <div
-                  class="makeStyles-label-id"
+                  class="TableCellHeader-label-id"
                 >
                   Type
                 </div>
@@ -5856,20 +5856,20 @@ exports[`Storyshots Generics / TablePagination both previous and next pages are
           <tbody>
             <tr>
               <td
-                class="MuiTableCell-root-id makeStyles-root-id"
+                class="MuiTableCell-root-id TablePagination-root-id"
                 colspan="1"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-back"
                       tabindex="0"
                       type="button"
@@ -5895,7 +5895,7 @@ exports[`Storyshots Generics / TablePagination both previous and next pages are
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -5952,20 +5952,20 @@ exports[`Storyshots Generics / TablePagination next page available 1`] = `
           <tbody>
             <tr>
               <td
-                class="MuiTableCell-root-id makeStyles-root-id"
+                class="MuiTableCell-root-id TablePagination-root-id"
                 colspan="1"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -5992,7 +5992,7 @@ exports[`Storyshots Generics / TablePagination next page available 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -6049,20 +6049,20 @@ exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
           <tbody>
             <tr>
               <td
-                class="MuiTableCell-root-id makeStyles-root-id"
+                class="MuiTableCell-root-id TablePagination-root-id"
                 colspan="1"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -6089,7 +6089,7 @@ exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -6147,20 +6147,20 @@ exports[`Storyshots Generics / TablePagination previous page available 1`] = `
           <tbody>
             <tr>
               <td
-                class="MuiTableCell-root-id makeStyles-root-id"
+                class="MuiTableCell-root-id TablePagination-root-id"
                 colspan="1"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-back"
                       tabindex="0"
                       type="button"
@@ -6186,7 +6186,7 @@ exports[`Storyshots Generics / TablePagination previous page available 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -6232,13 +6232,13 @@ exports[`Storyshots Generics / Timeline default 1`] = `
     class="Timeline-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="makeStyles-noExpander-id"
+        class="TimelineEvent-noExpander-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6246,7 +6246,7 @@ exports[`Storyshots Generics / Timeline default 1`] = `
           Expansion panel 1
         </div>
         <div
-          class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+          class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
         >
           <time
             class=""
@@ -6259,13 +6259,13 @@ exports[`Storyshots Generics / Timeline default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="makeStyles-noExpander-id"
+        class="TimelineEvent-noExpander-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6273,7 +6273,7 @@ exports[`Storyshots Generics / Timeline default 1`] = `
           Expansion panel 2
         </div>
         <div
-          class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+          class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
         >
           <time
             class=""
@@ -6286,13 +6286,13 @@ exports[`Storyshots Generics / Timeline default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="makeStyles-noExpander-id"
+        class="TimelineEvent-noExpander-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6300,7 +6300,7 @@ exports[`Storyshots Generics / Timeline default 1`] = `
           Expansion panel 3
         </div>
         <div
-          class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+          class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
         >
           <time
             class=""
@@ -6324,13 +6324,13 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
     class="Timeline-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id makeStyles-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
       >
         <div
           aria-disabled="false"
@@ -6348,7 +6348,7 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
               Expansion panel 1
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-dateExpander-id MuiTypography-body1-id"
+              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
             >
               Expansion panel 1
             </div>
@@ -6404,13 +6404,13 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id makeStyles-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
       >
         <div
           aria-disabled="false"
@@ -6428,7 +6428,7 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
               Expansion panel 2
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-dateExpander-id MuiTypography-body1-id"
+              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
             >
               Expansion panel 2
             </div>
@@ -6484,13 +6484,13 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id makeStyles-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
       >
         <div
           aria-disabled="false"
@@ -6508,7 +6508,7 @@ exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
               Expansion panel 3
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-dateExpander-id MuiTypography-body1-id"
+              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
             >
               Expansion panel 3
             </div>
@@ -6575,13 +6575,13 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
     class="Timeline-root-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id makeStyles-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
       >
         <div
           aria-disabled="false"
@@ -6599,7 +6599,7 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
               Expansion panel 1
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-dateExpander-id MuiTypography-body1-id"
+              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
             >
               Expansion panel 1
             </div>
@@ -6655,10 +6655,10 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineNote-root-id"
     >
       <div
-        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+        class="MuiAvatar-root-id MuiAvatar-circle-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
         style="background:#f44336"
       >
         <svg
@@ -6674,7 +6674,7 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
         </svg>
       </div>
       <div
-        class="makeStyles-title-id"
+        class="TimelineNote-title-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6694,10 +6694,10 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id TimelineNote-card-id MuiPaper-rounded-id"
       >
         <div
-          class="MuiCardContent-root-id makeStyles-cardContent-id"
+          class="MuiCardContent-root-id TimelineNote-cardContent-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6708,10 +6708,10 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineNote-root-id"
     >
       <div
-        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+        class="MuiAvatar-root-id MuiAvatar-circle-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
         style="background:#03a9f4"
       >
         <svg
@@ -6727,7 +6727,7 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
         </svg>
       </div>
       <div
-        class="makeStyles-title-id"
+        class="TimelineNote-title-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6747,10 +6747,10 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id TimelineNote-card-id MuiPaper-rounded-id"
       >
         <div
-          class="MuiCardContent-root-id makeStyles-cardContent-id"
+          class="MuiCardContent-root-id TimelineNote-cardContent-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -6761,13 +6761,13 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="TimelineEvent-root-id"
     >
       <span
-        class="makeStyles-dot-id"
+        class="TimelineEvent-dot-id"
       />
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id makeStyles-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
       >
         <div
           aria-disabled="false"
@@ -6785,7 +6785,7 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
               Expansion panel 3
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-dateExpander-id MuiTypography-body1-id"
+              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
             >
               Expansion panel 3
             </div>
@@ -6974,15 +6974,15 @@ exports[`Storyshots Orders / OrderCustomer default 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="CardTitle-root-id"
     >
       <span
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
       >
         Customer
       </span>
       <div
-        class="makeStyles-toolbar-id"
+        class="CardTitle-toolbar-id"
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -6999,31 +6999,31 @@ exports[`Storyshots Orders / OrderCustomer default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-children-id"
+      class="CardTitle-children-id"
     />
     <hr
-      class="makeStyles-hr-id"
+      class="CardTitle-hr-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
       >
         melissa.simon@example.com
       </div>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Shipping Address
         </div>
@@ -7054,16 +7054,16 @@ exports[`Storyshots Orders / OrderCustomer default 1`] = `
       />
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Billing Address
         </div>
@@ -7086,15 +7086,15 @@ exports[`Storyshots Orders / OrderCustomer editable 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="CardTitle-root-id"
     >
       <span
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
       >
         Customer
       </span>
       <div
-        class="makeStyles-toolbar-id"
+        class="CardTitle-toolbar-id"
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -7111,36 +7111,36 @@ exports[`Storyshots Orders / OrderCustomer editable 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-children-id"
+      class="CardTitle-children-id"
     />
     <hr
-      class="makeStyles-hr-id"
+      class="CardTitle-hr-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
       >
         melissa.simon@example.com
       </div>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Shipping Address
         </div>
         <div
-          class="makeStyles-sectionHeaderToolbar-id"
+          class="OrderCustomer-sectionHeaderToolbar-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -7181,21 +7181,21 @@ exports[`Storyshots Orders / OrderCustomer editable 1`] = `
       />
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Billing Address
         </div>
         <div
-          class="makeStyles-sectionHeaderToolbar-id"
+          class="OrderCustomer-sectionHeaderToolbar-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -7228,15 +7228,15 @@ exports[`Storyshots Orders / OrderCustomer loading 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="CardTitle-root-id"
     >
       <span
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
       >
         Customer
       </span>
       <div
-        class="makeStyles-toolbar-id"
+        class="CardTitle-toolbar-id"
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -7253,58 +7253,58 @@ exports[`Storyshots Orders / OrderCustomer loading 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-children-id"
+      class="CardTitle-children-id"
     />
     <hr
-      class="makeStyles-hr-id"
+      class="CardTitle-hr-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
       >
         ‌
       </span>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Shipping Address
         </div>
       </div>
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
       >
         ‌
       </span>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Billing Address
         </div>
       </div>
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
       >
         ‌
       </span>
@@ -7321,43 +7321,43 @@ exports[`Storyshots Orders / OrderCustomer no user permissions 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="CardTitle-root-id"
     >
       <span
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
       >
         Customer
       </span>
       <div
-        class="makeStyles-toolbar-id"
+        class="CardTitle-toolbar-id"
       />
     </div>
     <div
-      class="makeStyles-children-id"
+      class="CardTitle-children-id"
     />
     <hr
-      class="makeStyles-hr-id"
+      class="CardTitle-hr-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
       >
         melissa.simon@example.com
       </div>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Shipping Address
         </div>
@@ -7388,16 +7388,16 @@ exports[`Storyshots Orders / OrderCustomer no user permissions 1`] = `
       />
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Billing Address
         </div>
@@ -7420,15 +7420,15 @@ exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
     class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
   >
     <div
-      class="makeStyles-root-id"
+      class="CardTitle-root-id"
     >
       <span
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
       >
         Customer
       </span>
       <div
-        class="makeStyles-toolbar-id"
+        class="CardTitle-toolbar-id"
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -7445,31 +7445,31 @@ exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-children-id"
+      class="CardTitle-children-id"
     />
     <hr
-      class="makeStyles-hr-id"
+      class="CardTitle-hr-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
       >
         melissa.simon@example.com
       </div>
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Shipping Address
         </div>
@@ -7500,16 +7500,16 @@ exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
       />
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="MuiCardContent-root-id"
     >
       <div
-        class="makeStyles-sectionHeader-id"
+        class="OrderCustomer-sectionHeader-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
         >
           Billing Address
         </div>
@@ -7584,15 +7584,15 @@ exports[`Storyshots Orders / OrderHistory default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="OrderHistory-root-id"
   >
     <div
-      class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+      class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
     >
       Order History
     </div>
     <hr
-      class="makeStyles-root-id"
+      class="Hr-root-id"
     />
     <div
       class="Timeline-root-id"
@@ -7671,13 +7671,13 @@ exports[`Storyshots Orders / OrderHistory default 1`] = `
         </div>
       </form>
       <div
-        class="makeStyles-root-id"
+        class="TimelineEvent-root-id"
       >
         <span
-          class="makeStyles-dot-id"
+          class="TimelineEvent-dot-id"
         />
         <div
-          class="makeStyles-noExpander-id"
+          class="TimelineEvent-noExpander-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -7685,7 +7685,7 @@ exports[`Storyshots Orders / OrderHistory default 1`] = `
             Fulfilled 1 items
           </div>
           <div
-            class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+            class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
           >
             <time
               class=""
@@ -7806,7 +7806,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Attribute
         </div>
@@ -7814,34 +7814,34 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -7882,7 +7882,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -7926,10 +7926,10 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -7983,18 +7983,18 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="valueRequired"
                     type="checkbox"
                     value="true"
@@ -8009,21 +8009,21 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -8039,10 +8039,10 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -8057,17 +8057,17 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -8082,10 +8082,10 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -8122,17 +8122,17 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       john-doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       John Doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -8158,10 +8158,10 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -8198,17 +8198,17 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       milionare-pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       Milionare Pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -8243,22 +8243,22 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -8269,18 +8269,18 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInStorefront"
                     type="checkbox"
                     value="true"
@@ -8293,7 +8293,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -8331,18 +8331,18 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="visibleInStorefront"
                     type="checkbox"
                     value="true"
@@ -8355,7 +8355,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -8363,21 +8363,21 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInDashboard"
                     type="checkbox"
                     value="true"
@@ -8395,18 +8395,18 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="availableInGrid"
                     type="checkbox"
                     value="true"
@@ -8444,7 +8444,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Author
         </div>
@@ -8452,34 +8452,34 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -8520,7 +8520,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -8564,10 +8564,10 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -8620,18 +8620,18 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="valueRequired"
                     type="checkbox"
                     value="true"
@@ -8646,21 +8646,21 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -8676,10 +8676,10 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -8694,17 +8694,17 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -8719,10 +8719,10 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -8759,17 +8759,17 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       john-doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       John Doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -8795,10 +8795,10 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -8835,17 +8835,17 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       milionare-pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       Milionare Pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -8880,22 +8880,22 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -8906,18 +8906,18 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInStorefront"
                     type="checkbox"
                     value="true"
@@ -8930,7 +8930,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -8968,18 +8968,18 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="visibleInStorefront"
                     type="checkbox"
                     value="true"
@@ -8992,7 +8992,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -9000,21 +9000,21 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="filterableInDashboard"
                     type="checkbox"
                     value="false"
@@ -9032,18 +9032,18 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="availableInGrid"
                     type="checkbox"
                     value="true"
@@ -9081,7 +9081,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Author
         </div>
@@ -9089,34 +9089,34 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -9162,7 +9162,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -9206,10 +9206,10 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -9262,18 +9262,18 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="valueRequired"
                     type="checkbox"
                     value="true"
@@ -9288,21 +9288,21 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -9318,10 +9318,10 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -9336,17 +9336,17 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -9361,10 +9361,10 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -9401,17 +9401,17 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       john-doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       John Doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -9437,10 +9437,10 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -9477,17 +9477,17 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       milionare-pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       Milionare Pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -9522,22 +9522,22 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -9548,18 +9548,18 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInStorefront"
                     type="checkbox"
                     value="true"
@@ -9572,7 +9572,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -9615,18 +9615,18 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="visibleInStorefront"
                     type="checkbox"
                     value="true"
@@ -9639,7 +9639,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -9647,21 +9647,21 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="filterableInDashboard"
                     type="checkbox"
                     value="false"
@@ -9679,18 +9679,18 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="availableInGrid"
                     type="checkbox"
                     value="true"
@@ -9728,10 +9728,10 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -9741,34 +9741,34 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -9810,7 +9810,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -9855,10 +9855,10 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -9911,19 +9911,19 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                     disabled=""
                     name="valueRequired"
                     type="checkbox"
@@ -9939,21 +9939,21 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -9969,10 +9969,10 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -9987,17 +9987,17 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -10015,7 +10015,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -10052,25 +10052,25 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -10106,22 +10106,22 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -10132,19 +10132,19 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                     disabled=""
                     name="filterableInStorefront"
                     type="checkbox"
@@ -10158,7 +10158,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -10197,19 +10197,19 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                     disabled=""
                     name="visibleInStorefront"
                     type="checkbox"
@@ -10223,7 +10223,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -10231,22 +10231,22 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                     disabled=""
                     name="filterableInDashboard"
                     type="checkbox"
@@ -10265,19 +10265,19 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                     disabled=""
                     name="availableInGrid"
                     type="checkbox"
@@ -10316,7 +10316,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Author
         </div>
@@ -10324,34 +10324,34 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -10392,7 +10392,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -10436,10 +10436,10 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -10492,18 +10492,18 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="valueRequired"
                     type="checkbox"
                     value="true"
@@ -10518,21 +10518,21 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -10548,10 +10548,10 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -10566,17 +10566,17 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -10591,10 +10591,10 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -10631,17 +10631,17 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       john-doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       John Doe
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -10667,10 +10667,10 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -10707,17 +10707,17 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       milionare-pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       Milionare Pirate
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -10752,22 +10752,22 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -10778,18 +10778,18 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInStorefront"
                     type="checkbox"
                     value="true"
@@ -10802,7 +10802,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -10840,18 +10840,18 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="visibleInStorefront"
                     type="checkbox"
                     value="true"
@@ -10864,7 +10864,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -10872,21 +10872,21 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="filterableInDashboard"
                     type="checkbox"
                     value="false"
@@ -10904,18 +10904,18 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="availableInGrid"
                     type="checkbox"
                     value="true"
@@ -10953,7 +10953,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Author
         </div>
@@ -10961,34 +10961,34 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -11029,7 +11029,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -11073,10 +11073,10 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -11129,18 +11129,18 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="valueRequired"
                     type="checkbox"
                     value="true"
@@ -11155,21 +11155,21 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attribute Values
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -11185,10 +11185,10 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -11203,17 +11203,17 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                       scope="col"
                     >
                       Admin
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                       scope="col"
                     >
                       Default Store View
@@ -11231,7 +11231,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -11268,25 +11268,25 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnAdmin-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnStore-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -11321,22 +11321,22 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Properties
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -11347,18 +11347,18 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 Storefront Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="filterableInStorefront"
                     type="checkbox"
                     value="true"
@@ -11371,7 +11371,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -11409,18 +11409,18 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="visibleInStorefront"
                     type="checkbox"
                     value="true"
@@ -11433,7 +11433,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-subtitle1-id"
@@ -11441,21 +11441,21 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 Dashboard Properties
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="filterableInDashboard"
                     type="checkbox"
                     value="false"
@@ -11473,18 +11473,18 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="availableInGrid"
                     type="checkbox"
                     value="true"
@@ -11521,7 +11521,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Attributes
       </div>
@@ -11529,7 +11529,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -11549,7 +11549,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -11560,25 +11560,25 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Attributes
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -11590,14 +11590,14 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -11620,7 +11620,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -11639,43 +11639,43 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSlug-id"
                 scope="col"
               >
                 Attribute Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colName-id"
                 scope="col"
               >
                 Default Label
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colVisible-id"
                 scope="col"
               >
                 Visible
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSearchable-id"
                 scope="col"
               >
                 Searchable
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colFaceted-id"
                 scope="col"
               >
                 Use in faceted search
@@ -11689,20 +11689,20 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="6"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -11729,7 +11729,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -11763,7 +11763,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -11772,45 +11772,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 author
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Author
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="false"
               >
@@ -11818,7 +11818,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -11827,45 +11827,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 box-size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Box Size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="false"
               >
@@ -11873,7 +11873,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToz"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -11882,45 +11882,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 brand
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Brand
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -11928,7 +11928,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -11937,45 +11937,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 candy-box-size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Candy Box Size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -11983,7 +11983,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -11992,45 +11992,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 coffee-genre
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Coffee Genre
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12038,7 +12038,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToy"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12047,45 +12047,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 collar
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Collar
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12093,7 +12093,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTox"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12102,45 +12102,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 color
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Color
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="false"
               >
@@ -12148,7 +12148,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12157,45 +12157,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 cover
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Cover
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="false"
               >
@@ -12203,7 +12203,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12212,45 +12212,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 flavor
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Flavor
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12258,7 +12258,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12267,45 +12267,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 language
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Language
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="false"
               >
                 No
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12313,7 +12313,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12322,45 +12322,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 publisher
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Publisher
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12368,7 +12368,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
               data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
@@ -12377,45 +12377,45 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 Size
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
                 data-tc-visible="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
                 data-tc-searchable="true"
               >
                 Yes
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
                 data-tc-use-in-faceted-search="true"
               >
@@ -12441,7 +12441,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Attributes
       </div>
@@ -12449,7 +12449,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -12469,7 +12469,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -12480,25 +12480,25 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Attributes
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -12510,14 +12510,14 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -12540,7 +12540,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -12559,13 +12559,13 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -12573,31 +12573,31 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSlug-id"
                 scope="col"
               >
                 Attribute Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colName-id"
                 scope="col"
               >
                 Default Label
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colVisible-id"
                 scope="col"
               >
                 Visible
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSearchable-id"
                 scope="col"
               >
                 Searchable
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colFaceted-id"
                 scope="col"
               >
                 Use in faceted search
@@ -12611,20 +12611,20 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="6"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -12651,7 +12651,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -12686,7 +12686,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id"
+              class="MuiTableRow-root-id AttributeList-link-id"
               data-tc="id"
               data-tc-values="[]"
             >
@@ -12694,13 +12694,13 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -12708,51 +12708,51 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                 data-tc="slug"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                 data-tc="name"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                 data-tc="visible"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                 data-tc="searchable"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                 data-tc="use-in-faceted-search"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -12777,7 +12777,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Attributes
       </div>
@@ -12785,7 +12785,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -12805,7 +12805,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -12816,25 +12816,25 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Attributes
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -12846,14 +12846,14 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -12876,7 +12876,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -12891,31 +12891,31 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSlug-id"
                 scope="col"
               >
                 Attribute Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colName-id"
                 scope="col"
               >
                 Default Label
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisible-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colVisible-id"
                 scope="col"
               >
                 Visible
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSearchable-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colSearchable-id"
                 scope="col"
               >
                 Searchable
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFaceted-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id AttributeList-colFaceted-id"
                 scope="col"
               >
                 Use in faceted search
@@ -12929,20 +12929,20 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="6"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -12969,7 +12969,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -13071,7 +13071,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13111,7 +13111,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="LoginCard-buttonContainer-id"
@@ -13131,7 +13131,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
           </button>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
@@ -13204,7 +13204,7 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13244,7 +13244,7 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="LoginCard-buttonContainer-id"
@@ -13264,7 +13264,7 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
           </button>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
@@ -13328,7 +13328,7 @@ exports[`Storyshots Views / Authentication / Log in loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13368,7 +13368,7 @@ exports[`Storyshots Views / Authentication / Log in loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="LoginCard-buttonContainer-id"
@@ -13388,7 +13388,7 @@ exports[`Storyshots Views / Authentication / Log in loading 1`] = `
           </button>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
@@ -13419,7 +13419,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
           Forgot your password? Don't worry, we'll reset it for you.
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13460,7 +13460,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
@@ -13506,7 +13506,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
           Forgot your password? Don't worry, we'll reset it for you.
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13547,7 +13547,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
@@ -13584,7 +13584,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
           Forgot your password? Don't worry, we'll reset it for you.
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13626,7 +13626,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -13663,7 +13663,7 @@ exports[`Storyshots Views / Authentication / Reset password success default 1`]
         Success! In a few minutes you’ll receive a message with instructions on how to reset your password.
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="FormSpacer-spacer-id"
       />
       <button
         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordSuccessPage-submit-id MuiButton-containedPrimary-id"
@@ -13699,7 +13699,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
           Please set up a new password.
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13740,7 +13740,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13780,7 +13780,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id"
@@ -13817,7 +13817,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
           Please set up a new password.
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13859,7 +13859,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -13900,7 +13900,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="FormSpacer-spacer-id"
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -13961,7 +13961,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Categories
       </div>
@@ -13969,7 +13969,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -13989,7 +13989,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -14000,25 +14000,25 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Categories
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -14030,14 +14030,14 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -14060,7 +14060,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -14079,12 +14079,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14117,14 +14117,14 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -14163,10 +14163,10 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -14193,7 +14193,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -14235,12 +14235,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14272,12 +14272,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14309,12 +14309,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14346,12 +14346,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14383,12 +14383,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14420,12 +14420,12 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14467,7 +14467,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Categories
       </div>
@@ -14475,7 +14475,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -14495,7 +14495,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -14506,25 +14506,25 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Categories
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -14536,14 +14536,14 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -14566,7 +14566,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -14607,14 +14607,14 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -14653,10 +14653,10 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -14683,7 +14683,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -14745,7 +14745,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Categories
       </div>
@@ -14753,7 +14753,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -14773,7 +14773,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -14784,25 +14784,25 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Categories
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -14814,14 +14814,14 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -14844,7 +14844,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -14863,12 +14863,12 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -14901,14 +14901,14 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -14947,10 +14947,10 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -14977,7 +14977,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -15018,12 +15018,12 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -15034,7 +15034,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                 data-tc="name"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -15043,7 +15043,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -15052,7 +15052,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -15078,7 +15078,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Category
         </div>
@@ -15086,7 +15086,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -15095,22 +15095,22 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               General Informations
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -15154,16 +15154,16 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-scroll-id"
+              class="RichTextEditor-root-id RichTextEditor-scroll-id"
             >
               <div
-                class="makeStyles-input-id"
+                class="RichTextEditor-input-id"
               >
                 <div
-                  class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                  class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                 >
                   Category Description
                 </div>
@@ -15188,7 +15188,7 @@ Ctrl + B"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15209,7 +15209,7 @@ Ctrl + I"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15413,7 +15413,7 @@ Ctrl + K"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15471,21 +15471,21 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Search Engine Preview
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -15501,10 +15501,10 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -15534,7 +15534,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Category
         </div>
@@ -15542,7 +15542,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -15551,22 +15551,22 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               General Informations
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -15609,16 +15609,16 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-scroll-id"
+              class="RichTextEditor-root-id RichTextEditor-scroll-id"
             >
               <div
-                class="makeStyles-input-id"
+                class="RichTextEditor-input-id"
               >
                 <div
-                  class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                  class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                 >
                   Category Description
                 </div>
@@ -15643,7 +15643,7 @@ Ctrl + B"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15664,7 +15664,7 @@ Ctrl + I"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15868,7 +15868,7 @@ Ctrl + K"
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                          class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                           focusable="false"
                           role="presentation"
                           viewBox="0 0 24 24"
@@ -15926,21 +15926,21 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Search Engine Preview
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -15956,10 +15956,10 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -15989,7 +15989,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Coffees
         </div>
@@ -15997,7 +15997,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -16005,22 +16005,22 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -16063,16 +16063,16 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -16097,7 +16097,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -16118,7 +16118,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -16322,7 +16322,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -16584,21 +16584,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -16613,30 +16613,30 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <div
-            class="makeStyles-imageContainer-id"
+            class="ImageTile-imageContainer-id"
             data-tc="product-image"
           >
             <div
-              class="makeStyles-imageOverlay-id"
+              class="ImageTile-imageOverlay-id"
             >
               <div
-                class="makeStyles-imageOverlayToolbar-id"
+                class="ImageTile-imageOverlayToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -16663,13 +16663,13 @@ Ctrl + K"
             </div>
             <img
               alt="Alt text"
-              class="makeStyles-image-id"
+              class="ImageTile-image-id"
               src="placeholder255x255.png"
             />
           </div>
         </div>
         <hr
-          class="makeStyles-root-id"
+          class="Hr-root-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -16725,21 +16725,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -16755,10 +16755,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -16771,10 +16771,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -16788,21 +16788,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             All Subcategories
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -16818,10 +16818,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="ResponsiveTable-root-id"
@@ -16862,20 +16862,20 @@ Ctrl + K"
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="4"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     />
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-back"
                         tabindex="0"
                         type="button"
@@ -16901,7 +16901,7 @@ Ctrl + K"
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -16965,10 +16965,10 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -16978,7 +16978,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -16986,22 +16986,22 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -17045,16 +17045,16 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -17079,7 +17079,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -17100,7 +17100,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -17304,7 +17304,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -17362,21 +17362,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -17391,27 +17391,27 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <div>
             <div
-              class="makeStyles-imageContainer-id"
+              class="CategoryBackground-imageContainer-id"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
@@ -17420,21 +17420,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -17450,10 +17450,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -17466,10 +17466,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -17483,21 +17483,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             All Subcategories
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -17513,10 +17513,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="ResponsiveTable-root-id"
@@ -17535,13 +17535,13 @@ Ctrl + K"
                   scope="col"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       type="checkbox"
                       value="false"
@@ -17575,20 +17575,20 @@ Ctrl + K"
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="4"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     />
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-back"
                         disabled=""
                         tabindex="-1"
@@ -17615,7 +17615,7 @@ Ctrl + K"
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-next"
                         disabled=""
                         tabindex="-1"
@@ -17657,13 +17657,13 @@ Ctrl + K"
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       type="checkbox"
                       value="false"
@@ -17675,7 +17675,7 @@ Ctrl + K"
                   data-tc="name"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -17684,7 +17684,7 @@ Ctrl + K"
                   class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -17693,7 +17693,7 @@ Ctrl + K"
                   class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -17720,7 +17720,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Coffees
         </div>
@@ -17728,7 +17728,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -17736,22 +17736,22 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -17794,16 +17794,16 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -17828,7 +17828,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -17849,7 +17849,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -18053,7 +18053,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -18315,21 +18315,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -18344,20 +18344,20 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
-          class="makeStyles-photosIconContainer-id"
+          class="ImageUpload-photosIconContainer-id"
           tabindex="0"
         >
           <div
@@ -18366,7 +18366,7 @@ Ctrl + K"
             <input
               accept="image/*"
               autocomplete="off"
-              class="makeStyles-fileField-id"
+              class="ImageUpload-fileField-id"
               multiple=""
               style="display:none"
               tabindex="-1"
@@ -18374,7 +18374,7 @@ Ctrl + K"
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+              class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -18403,7 +18403,7 @@ Ctrl + K"
               </defs>
             </svg>
             <div
-              class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
             >
               Drop here to upload
             </div>
@@ -18411,21 +18411,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -18441,10 +18441,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -18457,10 +18457,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -18474,21 +18474,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             All Subcategories
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -18504,10 +18504,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="ResponsiveTable-root-id"
@@ -18548,20 +18548,20 @@ Ctrl + K"
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="4"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     />
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-back"
                         tabindex="0"
                         type="button"
@@ -18587,7 +18587,7 @@ Ctrl + K"
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -18651,7 +18651,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Coffees
         </div>
@@ -18659,7 +18659,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -18667,22 +18667,22 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -18725,16 +18725,16 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -18759,7 +18759,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -18780,7 +18780,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -18984,7 +18984,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -19246,21 +19246,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -19275,30 +19275,30 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <div
-            class="makeStyles-imageContainer-id"
+            class="ImageTile-imageContainer-id"
             data-tc="product-image"
           >
             <div
-              class="makeStyles-imageOverlay-id"
+              class="ImageTile-imageOverlay-id"
             >
               <div
-                class="makeStyles-imageOverlayToolbar-id"
+                class="ImageTile-imageOverlayToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -19325,13 +19325,13 @@ Ctrl + K"
             </div>
             <img
               alt="Alt text"
-              class="makeStyles-image-id"
+              class="ImageTile-image-id"
               src="placeholder255x255.png"
             />
           </div>
         </div>
         <hr
-          class="makeStyles-root-id"
+          class="Hr-root-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -19387,21 +19387,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -19417,10 +19417,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -19433,10 +19433,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
@@ -19450,21 +19450,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Products in Coffees
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -19480,10 +19480,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="CategoryProductList-tableContainer-id"
@@ -19552,20 +19552,20 @@ Ctrl + K"
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="5"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       />
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-back"
                           tabindex="0"
                           type="button"
@@ -19591,7 +19591,7 @@ Ctrl + K"
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-next"
                           tabindex="0"
                           type="button"
@@ -19656,7 +19656,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Coffees
         </div>
@@ -19664,7 +19664,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -19672,22 +19672,22 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -19730,16 +19730,16 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -19764,7 +19764,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -19785,7 +19785,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -19989,7 +19989,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -20251,21 +20251,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -20280,30 +20280,30 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <div
-            class="makeStyles-imageContainer-id"
+            class="ImageTile-imageContainer-id"
             data-tc="product-image"
           >
             <div
-              class="makeStyles-imageOverlay-id"
+              class="ImageTile-imageOverlay-id"
             >
               <div
-                class="makeStyles-imageOverlayToolbar-id"
+                class="ImageTile-imageOverlayToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -20330,13 +20330,13 @@ Ctrl + K"
             </div>
             <img
               alt="Alt text"
-              class="makeStyles-image-id"
+              class="ImageTile-image-id"
               src="placeholder255x255.png"
             />
           </div>
         </div>
         <hr
-          class="makeStyles-root-id"
+          class="Hr-root-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -20392,21 +20392,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -20422,10 +20422,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -20438,10 +20438,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -20455,21 +20455,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             All Subcategories
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -20485,10 +20485,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="ResponsiveTable-root-id"
@@ -20529,20 +20529,20 @@ Ctrl + K"
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="4"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     />
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-back"
                         tabindex="0"
                         type="button"
@@ -20568,7 +20568,7 @@ Ctrl + K"
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -20632,7 +20632,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Coffees
         </div>
@@ -20640,7 +20640,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
@@ -20648,22 +20648,22 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             General Informations
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           />
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -20706,16 +20706,16 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-scroll-id"
+            class="RichTextEditor-root-id RichTextEditor-scroll-id"
           >
             <div
-              class="makeStyles-input-id"
+              class="RichTextEditor-input-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
               >
                 Category Description
               </div>
@@ -20740,7 +20740,7 @@ Ctrl + B"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -20761,7 +20761,7 @@ Ctrl + I"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -20965,7 +20965,7 @@ Ctrl + K"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
@@ -21227,21 +21227,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Background Image (optional)
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -21256,30 +21256,30 @@ Ctrl + K"
             </button>
             <input
               accept="image/*"
-              class="makeStyles-fileField-id"
+              class="CategoryBackground-fileField-id"
               id="fileUpload"
               type="file"
             />
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <div
-            class="makeStyles-imageContainer-id"
+            class="ImageTile-imageContainer-id"
             data-tc="product-image"
           >
             <div
-              class="makeStyles-imageOverlay-id"
+              class="ImageTile-imageOverlay-id"
             >
               <div
-                class="makeStyles-imageOverlayToolbar-id"
+                class="ImageTile-imageOverlayToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -21306,13 +21306,13 @@ Ctrl + K"
             </div>
             <img
               alt="Alt text"
-              class="makeStyles-image-id"
+              class="ImageTile-image-id"
               src="placeholder255x255.png"
             />
           </div>
         </div>
         <hr
-          class="makeStyles-root-id"
+          class="Hr-root-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -21368,21 +21368,21 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Search Engine Preview
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -21398,10 +21398,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -21414,10 +21414,10 @@ Ctrl + K"
         </div>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
-        class="makeStyles-root-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
@@ -21431,21 +21431,21 @@ Ctrl + K"
         </span>
       </div>
       <div
-        class="makeStyles-spacer-id"
+        class="CardSpacer-spacer-id"
       />
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="CardTitle-root-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Products in Coffees
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -21461,10 +21461,10 @@ Ctrl + K"
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="CategoryProductList-tableContainer-id"
@@ -21501,12 +21501,12 @@ Ctrl + K"
                     scope="col"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
@@ -21549,20 +21549,20 @@ Ctrl + K"
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="5"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       />
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-back"
                           tabindex="0"
                           type="button"
@@ -21588,7 +21588,7 @@ Ctrl + K"
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-next"
                           tabindex="0"
                           type="button"
@@ -21628,25 +21628,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21654,7 +21654,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Gardner-Schultz
                       </div>
@@ -21669,7 +21669,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21687,25 +21687,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21713,7 +21713,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         James, Martinez and Murray
                       </div>
@@ -21728,7 +21728,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21746,25 +21746,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21772,7 +21772,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Curtis, Joyce and Turner
                       </div>
@@ -21787,7 +21787,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21805,25 +21805,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21831,7 +21831,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Davis, Brown and Ray
                       </div>
@@ -21846,7 +21846,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21864,25 +21864,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21890,7 +21890,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Gallegos Ltd
                       </div>
@@ -21905,7 +21905,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21923,25 +21923,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -21949,7 +21949,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Franklin Inc
                       </div>
@@ -21964,7 +21964,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -21982,25 +21982,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -22008,7 +22008,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams-Taylor
                       </div>
@@ -22023,7 +22023,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -22041,25 +22041,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -22067,7 +22067,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Riddle, Evans and Hicks
                       </div>
@@ -22082,7 +22082,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -22100,25 +22100,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -22126,7 +22126,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Hebert-Sherman
                       </div>
@@ -22141,7 +22141,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -22159,25 +22159,25 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CategoryProductList-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -22185,7 +22185,7 @@ Ctrl + K"
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Carter and Sons
                       </div>
@@ -22200,7 +22200,7 @@ Ctrl + K"
                     class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                   >
                     <div
-                      class="makeStyles-root-id undefined makeStyles-successDot-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
                       Published
                     </div>
@@ -22233,7 +22233,7 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Summer collection
         </div>
@@ -22241,34 +22241,34 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -22309,16 +22309,16 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -22343,7 +22343,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -22364,7 +22364,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -22568,7 +22568,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -22830,21 +22830,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Background Image (optional)
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -22866,23 +22866,23 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-imageContainer-id"
+                class="ImageTile-imageContainer-id"
                 data-tc="product-image"
               >
                 <div
-                  class="makeStyles-imageOverlay-id"
+                  class="ImageTile-imageOverlay-id"
                 >
                   <div
-                    class="makeStyles-imageOverlayToolbar-id"
+                    class="ImageTile-imageOverlayToolbar-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -22909,13 +22909,13 @@ Ctrl + K"
                 </div>
                 <img
                   alt="Alt text"
-                  class="makeStyles-image-id"
+                  class="ImageTile-image-id"
                   src="block1.jpg"
                 />
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -22971,21 +22971,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Products in Summer collection
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -23001,10 +23001,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -23023,12 +23023,12 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -23069,20 +23069,20 @@ Ctrl + K"
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="5"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -23109,7 +23109,7 @@ Ctrl + K"
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -23149,25 +23149,25 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -23175,7 +23175,7 @@ Ctrl + K"
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Murray Inc
                         </div>
@@ -23190,7 +23190,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
@@ -23228,25 +23228,25 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -23254,7 +23254,7 @@ Ctrl + K"
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Williams-Taylor
                         </div>
@@ -23269,7 +23269,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
@@ -23307,25 +23307,25 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -23333,7 +23333,7 @@ Ctrl + K"
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Hebert-Sherman
                         </div>
@@ -23348,7 +23348,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
@@ -23386,25 +23386,25 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -23412,7 +23412,7 @@ Ctrl + K"
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Estes, Johnson and Graham
                         </div>
@@ -23427,7 +23427,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
@@ -23463,21 +23463,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -23493,10 +23493,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -23515,28 +23515,28 @@ Ctrl + K"
               class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CardTitle-root-id"
               >
                 <span
-                  class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                 >
                   Visibility
                 </span>
                 <div
-                  class="makeStyles-toolbar-id"
+                  class="CardTitle-toolbar-id"
                 />
               </div>
               <div
-                class="makeStyles-children-id"
+                class="CardTitle-children-id"
               />
               <hr
-                class="makeStyles-hr-id"
+                class="CardTitle-hr-id"
               />
               <div
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="MuiFormControl-root-id makeStyles-formControl-id"
+                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                 >
                   <div
                     aria-label="isPublished"
@@ -23544,7 +23544,7 @@ Ctrl + K"
                     role="radiogroup"
                   >
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                     >
                       <span
                         aria-disabled="false"
@@ -23592,19 +23592,19 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Visible
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         >
                           since Aug 25, 2018
                         </span>
                       </span>
                     </label>
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                     >
                       <span
                         aria-disabled="false"
@@ -23651,36 +23651,36 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Hidden
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         />
                       </span>
                     </label>
                   </div>
                 </div>
                 <div
-                  class="makeStyles-children-id"
+                  class="VisibilityCard-children-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="FormSpacer-spacer-id"
                   />
                   <hr
-                    class="makeStyles-root-id"
+                    class="Hr-root-id"
                   />
                   <label
                     class="MuiFormControlLabel-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id makeStyles-checked-id"
+                        class="Checkbox-box-id Checkbox-checked-id"
                         name="isFeatured"
                         type="checkbox"
                         value="true"
@@ -23715,10 +23715,10 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -23728,34 +23728,34 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -23797,16 +23797,16 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -23831,7 +23831,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -23852,7 +23852,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -24056,7 +24056,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -24114,21 +24114,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Background Image (optional)
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -24150,10 +24150,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -24163,7 +24163,7 @@ Ctrl + K"
                   class="CollectionImage-imageContainer-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -24172,25 +24172,25 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -24207,10 +24207,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -24229,13 +24229,13 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -24277,20 +24277,20 @@ Ctrl + K"
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="5"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -24317,7 +24317,7 @@ Ctrl + K"
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -24357,13 +24357,13 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -24371,13 +24371,13 @@ Ctrl + K"
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id CollectionProducts-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -24392,10 +24392,10 @@ Ctrl + K"
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           <span
-                            class="makeStyles-skeleton-id"
+                            class="Skeleton-skeleton-id"
                           >
                             ‌
                           </span>
@@ -24406,7 +24406,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -24415,7 +24415,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -24452,21 +24452,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -24482,10 +24482,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -24504,28 +24504,28 @@ Ctrl + K"
               class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CardTitle-root-id"
               >
                 <span
-                  class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                 >
                   Visibility
                 </span>
                 <div
-                  class="makeStyles-toolbar-id"
+                  class="CardTitle-toolbar-id"
                 />
               </div>
               <div
-                class="makeStyles-children-id"
+                class="CardTitle-children-id"
               />
               <hr
-                class="makeStyles-hr-id"
+                class="CardTitle-hr-id"
               />
               <div
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="MuiFormControl-root-id makeStyles-formControl-id"
+                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                 >
                   <div
                     aria-label="isPublished"
@@ -24533,7 +24533,7 @@ Ctrl + K"
                     role="radiogroup"
                   >
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                     >
                       <span
                         aria-disabled="true"
@@ -24582,17 +24582,17 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Visible
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         />
                       </span>
                     </label>
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                     >
                       <span
                         aria-disabled="true"
@@ -24642,42 +24642,42 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Hidden
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         />
                       </span>
                     </label>
                   </div>
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                 >
                   Set publication date
                 </div>
                 <div
-                  class="makeStyles-children-id"
+                  class="VisibilityCard-children-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="FormSpacer-spacer-id"
                   />
                   <hr
-                    class="makeStyles-root-id"
+                    class="Hr-root-id"
                   />
                   <label
                     class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                       disabled=""
                       tabindex="-1"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                        class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                         disabled=""
                         name="isFeatured"
                         type="checkbox"
@@ -24713,7 +24713,7 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Summer collection
         </div>
@@ -24721,34 +24721,34 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -24790,16 +24790,16 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -24824,7 +24824,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -24845,7 +24845,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -25049,7 +25049,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -25311,21 +25311,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Background Image (optional)
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -25347,23 +25347,23 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-imageContainer-id"
+                class="ImageTile-imageContainer-id"
                 data-tc="product-image"
               >
                 <div
-                  class="makeStyles-imageOverlay-id"
+                  class="ImageTile-imageOverlay-id"
                 >
                   <div
-                    class="makeStyles-imageOverlayToolbar-id"
+                    class="ImageTile-imageOverlayToolbar-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -25390,13 +25390,13 @@ Ctrl + K"
                 </div>
                 <img
                   alt="Alt text"
-                  class="makeStyles-image-id"
+                  class="ImageTile-image-id"
                   src="block1.jpg"
                 />
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -25452,21 +25452,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Products in Summer collection
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -25483,10 +25483,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -25535,20 +25535,20 @@ Ctrl + K"
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="5"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -25575,7 +25575,7 @@ Ctrl + K"
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -25626,21 +25626,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -25656,10 +25656,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -25678,28 +25678,28 @@ Ctrl + K"
               class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CardTitle-root-id"
               >
                 <span
-                  class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                 >
                   Visibility
                 </span>
                 <div
-                  class="makeStyles-toolbar-id"
+                  class="CardTitle-toolbar-id"
                 />
               </div>
               <div
-                class="makeStyles-children-id"
+                class="CardTitle-children-id"
               />
               <hr
-                class="makeStyles-hr-id"
+                class="CardTitle-hr-id"
               />
               <div
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="MuiFormControl-root-id makeStyles-formControl-id"
+                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                 >
                   <div
                     aria-label="isPublished"
@@ -25707,7 +25707,7 @@ Ctrl + K"
                     role="radiogroup"
                   >
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                     >
                       <span
                         aria-disabled="true"
@@ -25757,19 +25757,19 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Visible
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         >
                           since Aug 25, 2018
                         </span>
                       </span>
                     </label>
                     <label
-                      class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                     >
                       <span
                         aria-disabled="true"
@@ -25818,37 +25818,37 @@ Ctrl + K"
                         class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                       >
                         <p
-                          class="makeStyles-label-id"
+                          class="VisibilityCard-label-id"
                         >
                           Hidden
                         </p>
                         <span
-                          class="makeStyles-secondLabel-id"
+                          class="VisibilityCard-secondLabel-id"
                         />
                       </span>
                     </label>
                   </div>
                 </div>
                 <div
-                  class="makeStyles-children-id"
+                  class="VisibilityCard-children-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="FormSpacer-spacer-id"
                   />
                   <hr
-                    class="makeStyles-root-id"
+                    class="Hr-root-id"
                   />
                   <label
                     class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                       disabled=""
                       tabindex="-1"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id makeStyles-checked-id makeStyles-disabled-id"
+                        class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                         disabled=""
                         name="isFeatured"
                         type="checkbox"
@@ -25883,7 +25883,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Collections
       </div>
@@ -25891,7 +25891,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -25911,7 +25911,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -25922,25 +25922,25 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Collections
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -25952,14 +25952,14 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -25982,7 +25982,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -26001,12 +26001,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26039,14 +26039,14 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -26085,10 +26085,10 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -26115,7 +26115,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -26157,12 +26157,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26185,7 +26185,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26200,12 +26200,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26228,7 +26228,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26243,12 +26243,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26271,7 +26271,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26286,12 +26286,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26314,7 +26314,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26329,12 +26329,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26357,7 +26357,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26372,12 +26372,12 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
@@ -26400,7 +26400,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-tc-published="true"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -26425,7 +26425,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Collections
       </div>
@@ -26433,7 +26433,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -26454,7 +26454,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -26465,25 +26465,25 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Collections
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -26495,14 +26495,14 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -26525,7 +26525,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -26544,13 +26544,13 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -26584,14 +26584,14 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -26630,10 +26630,10 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -26660,7 +26660,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -26702,13 +26702,13 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -26720,7 +26720,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                 data-tc="name"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -26729,7 +26729,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -26739,7 +26739,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
                 data-tc="published"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -26764,7 +26764,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Collections
       </div>
@@ -26772,7 +26772,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -26792,7 +26792,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -26803,25 +26803,25 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Collections
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -26833,14 +26833,14 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -26863,7 +26863,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -26904,14 +26904,14 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -26950,10 +26950,10 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -26980,7 +26980,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -27043,7 +27043,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add Collection
         </div>
@@ -27051,34 +27051,34 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -27119,16 +27119,16 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -27153,7 +27153,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -27174,7 +27174,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -27378,7 +27378,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -27436,21 +27436,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Background Image (optional)
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -27472,13 +27472,13 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-photosIconContainer-id"
+              class="ImageUpload-photosIconContainer-id"
               tabindex="0"
             >
               <div
@@ -27487,7 +27487,7 @@ Ctrl + K"
                 <input
                   accept="image/*"
                   autocomplete="off"
-                  class="makeStyles-fileField-id"
+                  class="ImageUpload-fileField-id"
                   multiple=""
                   style="display:none"
                   tabindex="-1"
@@ -27495,7 +27495,7 @@ Ctrl + K"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -27524,7 +27524,7 @@ Ctrl + K"
                   </defs>
                 </svg>
                 <div
-                  class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                 >
                   Drop here to upload
                 </div>
@@ -27532,21 +27532,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -27562,10 +27562,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -27584,22 +27584,22 @@ Ctrl + K"
               class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CardTitle-root-id"
               >
                 <span
-                  class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                 >
                   Availability
                 </span>
                 <div
-                  class="makeStyles-toolbar-id"
+                  class="CardTitle-toolbar-id"
                 />
               </div>
               <div
-                class="makeStyles-children-id"
+                class="CardTitle-children-id"
               />
               <hr
-                class="makeStyles-hr-id"
+                class="CardTitle-hr-id"
               />
               <div
                 class="MuiCardContent-root-id"
@@ -27608,28 +27608,28 @@ Ctrl + K"
                   class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
                 >
                   <div
-                    class="makeStyles-root-id"
+                    class="CardTitle-root-id"
                   >
                     <span
-                      class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                     >
                       Visibility
                     </span>
                     <div
-                      class="makeStyles-toolbar-id"
+                      class="CardTitle-toolbar-id"
                     />
                   </div>
                   <div
-                    class="makeStyles-children-id"
+                    class="CardTitle-children-id"
                   />
                   <hr
-                    class="makeStyles-hr-id"
+                    class="CardTitle-hr-id"
                   />
                   <div
                     class="MuiCardContent-root-id"
                   >
                     <div
-                      class="MuiFormControl-root-id makeStyles-formControl-id"
+                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                     >
                       <div
                         aria-label="isPublished"
@@ -27637,7 +27637,7 @@ Ctrl + K"
                         role="radiogroup"
                       >
                         <label
-                          class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                         >
                           <span
                             aria-disabled="false"
@@ -27684,17 +27684,17 @@ Ctrl + K"
                             class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                           >
                             <p
-                              class="makeStyles-label-id"
+                              class="VisibilityCard-label-id"
                             >
                               Visible
                             </p>
                             <span
-                              class="makeStyles-secondLabel-id"
+                              class="VisibilityCard-secondLabel-id"
                             />
                           </span>
                         </label>
                         <label
-                          class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                         >
                           <span
                             aria-disabled="false"
@@ -27742,24 +27742,24 @@ Ctrl + K"
                             class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                           >
                             <p
-                              class="makeStyles-label-id"
+                              class="VisibilityCard-label-id"
                             >
                               Hidden
                             </p>
                             <span
-                              class="makeStyles-secondLabel-id"
+                              class="VisibilityCard-secondLabel-id"
                             />
                           </span>
                         </label>
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                     >
                       Set publication date
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="VisibilityCard-children-id"
                     />
                   </div>
                 </div>
@@ -27785,7 +27785,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add Collection
         </div>
@@ -27793,34 +27793,34 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -27862,16 +27862,16 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -27896,7 +27896,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -27917,7 +27917,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -28121,7 +28121,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -28179,21 +28179,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Background Image (optional)
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -28215,13 +28215,13 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-photosIconContainer-id"
+              class="ImageUpload-photosIconContainer-id"
               tabindex="0"
             >
               <div
@@ -28230,7 +28230,7 @@ Ctrl + K"
                 <input
                   accept="image/*"
                   autocomplete="off"
-                  class="makeStyles-fileField-id"
+                  class="ImageUpload-fileField-id"
                   multiple=""
                   style="display:none"
                   tabindex="-1"
@@ -28238,7 +28238,7 @@ Ctrl + K"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -28267,7 +28267,7 @@ Ctrl + K"
                   </defs>
                 </svg>
                 <div
-                  class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                 >
                   Drop here to upload
                 </div>
@@ -28275,21 +28275,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -28305,10 +28305,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -28327,22 +28327,22 @@ Ctrl + K"
               class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CardTitle-root-id"
               >
                 <span
-                  class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                 >
                   Availability
                 </span>
                 <div
-                  class="makeStyles-toolbar-id"
+                  class="CardTitle-toolbar-id"
                 />
               </div>
               <div
-                class="makeStyles-children-id"
+                class="CardTitle-children-id"
               />
               <hr
-                class="makeStyles-hr-id"
+                class="CardTitle-hr-id"
               />
               <div
                 class="MuiCardContent-root-id"
@@ -28351,28 +28351,28 @@ Ctrl + K"
                   class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
                 >
                   <div
-                    class="makeStyles-root-id"
+                    class="CardTitle-root-id"
                   >
                     <span
-                      class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                     >
                       Visibility
                     </span>
                     <div
-                      class="makeStyles-toolbar-id"
+                      class="CardTitle-toolbar-id"
                     />
                   </div>
                   <div
-                    class="makeStyles-children-id"
+                    class="CardTitle-children-id"
                   />
                   <hr
-                    class="makeStyles-hr-id"
+                    class="CardTitle-hr-id"
                   />
                   <div
                     class="MuiCardContent-root-id"
                   >
                     <div
-                      class="MuiFormControl-root-id makeStyles-formControl-id"
+                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                     >
                       <div
                         aria-label="isPublished"
@@ -28380,7 +28380,7 @@ Ctrl + K"
                         role="radiogroup"
                       >
                         <label
-                          class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                         >
                           <span
                             aria-disabled="true"
@@ -28429,17 +28429,17 @@ Ctrl + K"
                             class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                           >
                             <p
-                              class="makeStyles-label-id"
+                              class="VisibilityCard-label-id"
                             >
                               Visible
                             </p>
                             <span
-                              class="makeStyles-secondLabel-id"
+                              class="VisibilityCard-secondLabel-id"
                             />
                           </span>
                         </label>
                         <label
-                          class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                         >
                           <span
                             aria-disabled="true"
@@ -28489,24 +28489,24 @@ Ctrl + K"
                             class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                           >
                             <p
-                              class="makeStyles-label-id"
+                              class="VisibilityCard-label-id"
                             >
                               Hidden
                             </p>
                             <span
-                              class="makeStyles-secondLabel-id"
+                              class="VisibilityCard-secondLabel-id"
                             />
                           </span>
                         </label>
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                     >
                       Set publication date
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="VisibilityCard-children-id"
                     />
                   </div>
                 </div>
@@ -28528,10 +28528,10 @@ exports[`Storyshots Views / Configuration default 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id ExtendedPageHeader-block-id"
+      class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Configuration
       </div>
@@ -28539,15 +28539,15 @@ exports[`Storyshots Views / Configuration default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -28556,16 +28556,16 @@ exports[`Storyshots Views / Configuration default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28584,12 +28584,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Attributes
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Determine attributes used to create product types
               </div>
@@ -28597,13 +28597,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28622,12 +28622,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Product Types
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Define types of products you sell
               </div>
@@ -28637,10 +28637,10 @@ exports[`Storyshots Views / Configuration default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -28649,16 +28649,16 @@ exports[`Storyshots Views / Configuration default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28677,12 +28677,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Shipping Methods
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage how you ship out orders
               </div>
@@ -28690,13 +28690,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28715,12 +28715,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Taxes
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage how your store charges tax
               </div>
@@ -28730,10 +28730,10 @@ exports[`Storyshots Views / Configuration default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -28742,16 +28742,16 @@ exports[`Storyshots Views / Configuration default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28770,12 +28770,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Staff Members
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage your employees and their permissions
               </div>
@@ -28785,10 +28785,10 @@ exports[`Storyshots Views / Configuration default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -28797,16 +28797,16 @@ exports[`Storyshots Views / Configuration default 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28825,12 +28825,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Navigation
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Define how users can navigate through your store
               </div>
@@ -28838,13 +28838,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28863,12 +28863,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Site Settings
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 View and update your site settings
               </div>
@@ -28876,13 +28876,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28901,12 +28901,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Pages
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage and add additional pages
               </div>
@@ -28914,13 +28914,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28942,12 +28942,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Plugins
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 View and update your plugins and their settings.
               </div>
@@ -28955,13 +28955,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -28980,12 +28980,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Service Accounts
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage external integrations accounts
               </div>
@@ -28993,13 +28993,13 @@ exports[`Storyshots Views / Configuration default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -29018,12 +29018,12 @@ exports[`Storyshots Views / Configuration default 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Webhooks
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 View and update your webhook and their settings
               </div>
@@ -29044,10 +29044,10 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id ExtendedPageHeader-block-id"
+      class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Configuration
       </div>
@@ -29055,15 +29055,15 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -29072,16 +29072,16 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -29100,12 +29100,12 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Attributes
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Determine attributes used to create product types
               </div>
@@ -29113,13 +29113,13 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -29138,12 +29138,12 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Product Types
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Define types of products you sell
               </div>
@@ -29153,10 +29153,10 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-configurationCategory-id"
+      class="ConfigurationPage-configurationCategory-id"
     >
       <div
-        class="makeStyles-configurationLabel-id"
+        class="ConfigurationPage-configurationLabel-id"
       >
         <div
           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -29165,16 +29165,16 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-configurationItem-id"
+        class="ConfigurationPage-configurationItem-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -29193,12 +29193,12 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Navigation
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Define how users can navigate through your store
               </div>
@@ -29206,13 +29206,13 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
         >
           <div
-            class="MuiCardContent-root-id makeStyles-cardContent-id"
+            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
           >
             <div
-              class="makeStyles-icon-id"
+              class="ConfigurationPage-icon-id"
             >
               <svg
                 aria-hidden="true"
@@ -29231,12 +29231,12 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
             </div>
             <div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
                 Pages
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-sectionDescription-id MuiTypography-body1-id"
+                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
               >
                 Manage and add additional pages
               </div>
@@ -29260,7 +29260,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Tom Cooper's Address Book
       </div>
@@ -29268,7 +29268,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -29285,27 +29285,27 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="CustomerAddressListPage-root-id"
     >
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id makeStyles-constantHeight-id"
+          class="CardTitle-root-id CardTitle-constantHeight-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             Default Address
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <div>
               <button
                 aria-haspopup="true"
                 aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                 tabindex="0"
                 type="button"
               >
@@ -29329,10 +29329,10 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -29365,10 +29365,10 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
           </address>
         </div>
         <div
-          class="makeStyles-actionsContainer-id"
+          class="CustomerAddress-actionsContainer-id"
         >
           <div
-            class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -29396,22 +29396,22 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id makeStyles-constantHeight-id"
+          class="CardTitle-root-id CardTitle-constantHeight-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           />
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <div>
               <button
                 aria-haspopup="true"
                 aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                 tabindex="0"
                 type="button"
               >
@@ -29435,10 +29435,10 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
@@ -29470,10 +29470,10 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
           </address>
         </div>
         <div
-          class="makeStyles-actionsContainer-id"
+          class="CustomerAddress-actionsContainer-id"
         >
           <div
-            class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -29516,7 +29516,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         ...'s Address Book
       </div>
@@ -29524,7 +29524,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -29541,31 +29541,31 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id"
+      class="CustomerAddressListPage-root-id"
     >
       <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
       >
         <div
-          class="makeStyles-root-id makeStyles-constantHeight-id"
+          class="CardTitle-root-id CardTitle-constantHeight-id"
         >
           <span
-            class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
           >
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </span>
           <div
-            class="makeStyles-toolbar-id"
+            class="CardTitle-toolbar-id"
           >
             <div>
               <button
                 aria-haspopup="true"
                 aria-label="More"
-                class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -29590,25 +29590,25 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-children-id"
+          class="CardTitle-children-id"
         />
         <hr
-          class="makeStyles-hr-id"
+          class="CardTitle-hr-id"
         />
         <div
           class="MuiCardContent-root-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
           >
             ‌
           </span>
         </div>
         <div
-          class="makeStyles-actionsContainer-id"
+          class="CustomerAddress-actionsContainer-id"
         >
           <div
-            class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -29650,7 +29650,7 @@ exports[`Storyshots Views / Customers / Address Book no data 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-empty-id"
+      class="CustomerAddressListPage-empty-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-h5-id"
@@ -29658,12 +29658,12 @@ exports[`Storyshots Views / Customers / Address Book no data 1`] = `
         There is no address to show for this customer
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-description-id MuiTypography-body1-id"
+        class="MuiTypography-root-id CustomerAddressListPage-description-id MuiTypography-body1-id"
       >
         This customer doesn’t have any adresses added to his address book. You can add address using the button below.
       </div>
       <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id makeStyles-addButton-id MuiButton-containedPrimary-id"
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id CustomerAddressListPage-addButton-id MuiButton-containedPrimary-id"
         tabindex="0"
         type="button"
       >
@@ -29690,7 +29690,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Customer
         </div>
@@ -29698,40 +29698,40 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer Overview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CustomerCreateDetails-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -29842,31 +29842,31 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-overflow-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Primary Address
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-overflow-id"
+              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -29874,10 +29874,10 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 The primary address of this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -29955,10 +29955,10 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -30036,7 +30036,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30074,7 +30074,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30112,10 +30112,10 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -30193,14 +30193,14 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30300,28 +30300,28 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Notes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -30332,7 +30332,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 Enter any extra infotmation regarding this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30396,7 +30396,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Customer
         </div>
@@ -30404,40 +30404,40 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer Overview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CustomerCreateDetails-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30553,31 +30553,31 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-overflow-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Primary Address
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-overflow-id"
+              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -30585,10 +30585,10 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 The primary address of this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -30676,10 +30676,10 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -30767,7 +30767,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30810,7 +30810,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -30853,10 +30853,10 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -30944,14 +30944,14 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31061,28 +31061,28 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Notes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -31093,7 +31093,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 Enter any extra infotmation regarding this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31162,7 +31162,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Customer
         </div>
@@ -31170,40 +31170,40 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer Overview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="CustomerCreateDetails-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31317,31 +31317,31 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-overflow-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Primary Address
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-overflow-id"
+              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -31349,10 +31349,10 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 The primary address of this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -31432,10 +31432,10 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -31515,7 +31515,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31554,7 +31554,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31593,10 +31593,10 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
@@ -31676,14 +31676,14 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id"
+                class="AddressEdit-root-id"
               >
                 <div>
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31785,28 +31785,28 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Notes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -31817,7 +31817,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 Enter any extra infotmation regarding this customer.
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31882,7 +31882,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -31890,53 +31890,53 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -31992,39 +31992,39 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -32098,10 +32098,10 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -32143,21 +32143,21 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -32173,10 +32173,10 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -32209,7 +32209,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -32220,7 +32220,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -32242,13 +32242,13 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -32263,15 +32263,15 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -32287,16 +32287,16 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Address
               </div>
@@ -32328,39 +32328,39 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -32372,18 +32372,18 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -32414,7 +32414,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -32422,53 +32422,53 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -32524,39 +32524,39 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -32630,10 +32630,10 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -32675,21 +32675,21 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -32705,10 +32705,10 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -32741,7 +32741,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -32752,7 +32752,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -32774,13 +32774,13 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -32795,15 +32795,15 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -32819,16 +32819,16 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
@@ -32859,13 +32859,13 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               </address>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
@@ -32897,39 +32897,39 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -32941,18 +32941,18 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -32983,7 +32983,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -32991,53 +32991,53 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -33093,39 +33093,39 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -33209,10 +33209,10 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -33259,21 +33259,21 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -33289,10 +33289,10 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -33325,7 +33325,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -33336,7 +33336,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -33358,13 +33358,13 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -33379,15 +33379,15 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -33403,16 +33403,16 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Address
               </div>
@@ -33444,39 +33444,39 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -33488,18 +33488,18 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -33530,10 +33530,10 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -33543,59 +33543,59 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                   style="width:10rem"
                 >
                   ‌
                 </span>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id MuiFormControlLabel-disabled-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isActive"
                     type="checkbox"
@@ -33653,39 +33653,39 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -33761,10 +33761,10 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -33807,21 +33807,21 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -33837,10 +33837,10 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -33873,7 +33873,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -33890,7 +33890,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -33899,7 +33899,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -33908,16 +33908,16 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -33933,15 +33933,15 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -33958,77 +33958,77 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Address
               </div>
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
@@ -34053,7 +34053,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -34061,53 +34061,53 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -34163,39 +34163,39 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -34269,10 +34269,10 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -34314,21 +34314,21 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -34344,10 +34344,10 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -34380,7 +34380,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -34391,7 +34391,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -34413,13 +34413,13 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -34434,15 +34434,15 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -34458,16 +34458,16 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Address
               </div>
@@ -34499,56 +34499,56 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 -
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -34579,7 +34579,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -34587,53 +34587,53 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -34689,39 +34689,39 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -34795,10 +34795,10 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -34840,21 +34840,21 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -34870,10 +34870,10 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -34906,7 +34906,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -34917,7 +34917,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -34939,13 +34939,13 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -34960,15 +34960,15 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -34984,16 +34984,16 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Address
               </div>
@@ -35025,39 +35025,39 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -35069,18 +35069,18 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 -
               </div>
@@ -35105,7 +35105,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -35113,53 +35113,53 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -35215,39 +35215,39 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -35321,10 +35321,10 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -35366,21 +35366,21 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -35396,10 +35396,10 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -35432,7 +35432,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -35443,7 +35443,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -35465,13 +35465,13 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -35486,15 +35486,15 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -35510,10 +35510,10 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -35526,39 +35526,39 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -35570,18 +35570,18 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -35612,7 +35612,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -35620,53 +35620,53 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -35722,39 +35722,39 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -35828,10 +35828,10 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -35873,21 +35873,21 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -35903,10 +35903,10 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -35939,7 +35939,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -35950,7 +35950,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -35972,13 +35972,13 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -35993,15 +35993,15 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -36017,16 +36017,16 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
@@ -36058,39 +36058,39 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -36102,18 +36102,18 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -36144,7 +36144,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Tom Cooper
         </div>
@@ -36152,53 +36152,53 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-cardTitle-id"
+              class="CardTitle-root-id CustomerDetails-cardTitle-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                 >
                   Active member since May 2017
                 </div>
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerDetails-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
+                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -36254,39 +36254,39 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Personal Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id CustomerInfo-content-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -36360,10 +36360,10 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id CustomerInfo-hr-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
               >
                 Contact Informations
               </div>
@@ -36405,21 +36405,21 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Recent Orders
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -36435,10 +36435,10 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -36471,7 +36471,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                       Status
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                       scope="col"
                     >
                       Total
@@ -36482,7 +36482,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -36504,13 +36504,13 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Fully paid
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                     >
                       $1,215.89
                     </td>
@@ -36525,15 +36525,15 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Address Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -36549,16 +36549,16 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-body1-id"
+                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
@@ -36590,39 +36590,39 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Customer History
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last login
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -36634,18 +36634,18 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
               >
                 Last order
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-value-id MuiTypography-h6-id"
+                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
               >
                 <time
                   class=""
@@ -36675,7 +36675,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Customers
       </div>
@@ -36683,7 +36683,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -36703,7 +36703,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -36714,25 +36714,25 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Customers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -36744,14 +36744,14 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -36774,7 +36774,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -36793,31 +36793,31 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colName-id"
                 scope="col"
               >
                 Customer Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
                 scope="col"
               >
                 Customer Email
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
                 scope="col"
               >
                 No. of Orders
@@ -36831,14 +36831,14 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -36877,10 +36877,10 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -36907,7 +36907,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -36941,817 +36941,817 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 Curtis.bailey@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 curtis.bailey@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Elizabeth Vaughn
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 elizabeth.vaughn@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 michael.martinez@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Kayla Griffin
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 kayla.griffin@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Donna Robinson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 donna.robinson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 James Bqall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 james.ball@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 anthony.gonzalez@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 anthony.gonzalez@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 wesley.davis@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Laura Stone
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 laura.stone@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 William Miller
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 william.miller@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Donald Solomon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 donald.solomon@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Anthony Young
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 anthony.young@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Hanson Sharon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 sharon.hanson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 laura.jensen@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Mark Lee
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 mark.lee@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 1
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 2
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Faith Smith
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 faith.smith@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 John Jones
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 john.jones@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Ronald Fisher
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 ronald.fisher@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Jason Gray
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 jason.gray@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 0
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               >
                 Tom Cooper
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 admin@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 6
               </td>
@@ -37775,7 +37775,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Customers
       </div>
@@ -37783,7 +37783,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -37804,7 +37804,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -37815,25 +37815,25 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Customers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -37845,14 +37845,14 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -37875,7 +37875,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -37894,13 +37894,13 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -37908,19 +37908,19 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colName-id"
                 scope="col"
               >
                 Customer Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
                 scope="col"
               >
                 Customer Email
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
                 scope="col"
               >
                 No. of Orders
@@ -37934,14 +37934,14 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -37980,10 +37980,10 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -38010,7 +38010,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -38051,13 +38051,13 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -38065,22 +38065,22 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
               />
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -38105,7 +38105,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Customers
       </div>
@@ -38113,7 +38113,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -38133,7 +38133,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -38144,25 +38144,25 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Customers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -38174,14 +38174,14 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -38204,7 +38204,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -38219,19 +38219,19 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colName-id"
                 scope="col"
               >
                 Customer Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEmail-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
                 scope="col"
               >
                 Customer Email
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colOrders-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
                 scope="col"
               >
                 No. of Orders
@@ -38245,14 +38245,14 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -38291,10 +38291,10 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -38321,7 +38321,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -38384,7 +38384,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Sale
         </div>
@@ -38392,34 +38392,34 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -38462,28 +38462,28 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -38602,34 +38602,34 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -38706,12 +38706,12 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -38744,7 +38744,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Sale
         </div>
@@ -38752,34 +38752,34 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -38827,28 +38827,28 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -38967,34 +38967,34 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -39081,12 +39081,12 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -39119,7 +39119,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Sale
         </div>
@@ -39127,34 +39127,34 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -39198,28 +39198,28 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -39342,34 +39342,34 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -39448,12 +39448,12 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -39486,7 +39486,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Happy minute day!
         </div>
@@ -39494,34 +39494,34 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -39564,28 +39564,28 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -39704,28 +39704,28 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -39769,10 +39769,10 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id"
+            class="TabContainer-root-id"
           >
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
@@ -39791,21 +39791,21 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </span>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Eligible Collections
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -39821,10 +39821,10 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -39843,25 +39843,25 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-wideColumn-id"
                       scope="col"
                     >
                       Collection name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-textRight-id"
                       scope="col"
                     >
                       Products
@@ -39879,20 +39879,20 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="4"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -39919,7 +39919,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -39953,18 +39953,18 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountCollections-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -39976,12 +39976,12 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                       Winter Collection
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-textRight-id"
                     >
                       110
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -40011,34 +40011,34 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -40115,12 +40115,12 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -40140,22 +40140,22 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -40171,7 +40171,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 Happy minute day!
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40184,13 +40184,13 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 30%
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40203,7 +40203,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 Jan 3, 2019
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40236,7 +40236,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Happy minute day!
         </div>
@@ -40244,34 +40244,34 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -40314,28 +40314,28 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -40454,28 +40454,28 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -40519,10 +40519,10 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id"
+            class="TabContainer-root-id"
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -40541,21 +40541,21 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </span>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Eligible Categories
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -40571,10 +40571,10 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -40593,25 +40593,25 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
                       scope="col"
                     >
                       Products
@@ -40629,20 +40629,20 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="4"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -40669,7 +40669,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -40703,18 +40703,18 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -40726,12 +40726,12 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                       Apparel
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                     >
                       18
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -40761,34 +40761,34 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -40865,12 +40865,12 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -40890,22 +40890,22 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -40921,7 +40921,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 Happy minute day!
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40934,13 +40934,13 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 30%
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40953,7 +40953,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 Jan 3, 2019
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -40986,7 +40986,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Happy minute day!
         </div>
@@ -40994,34 +40994,34 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -41069,28 +41069,28 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -41209,28 +41209,28 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -41279,10 +41279,10 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id"
+            class="TabContainer-root-id"
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -41301,21 +41301,21 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </span>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Eligible Categories
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -41331,10 +41331,10 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -41353,25 +41353,25 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
                       scope="col"
                     >
                       Products
@@ -41389,20 +41389,20 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="4"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -41429,7 +41429,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -41463,18 +41463,18 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -41486,12 +41486,12 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                       Apparel
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                     >
                       18
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -41521,34 +41521,34 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -41635,12 +41635,12 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -41660,22 +41660,22 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -41691,7 +41691,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 Happy minute day!
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -41704,13 +41704,13 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 30%
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -41723,7 +41723,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 Jan 3, 2019
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -41756,10 +41756,10 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -41769,34 +41769,34 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -41840,28 +41840,28 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -41984,28 +41984,28 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -42050,10 +42050,10 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id"
+            class="TabContainer-root-id"
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
@@ -42072,21 +42072,21 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </span>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Eligible Categories
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -42102,10 +42102,10 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -42124,13 +42124,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -42138,13 +42138,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
                       scope="col"
                     >
                       Products
@@ -42162,20 +42162,20 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="4"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -42202,7 +42202,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-next"
                             disabled=""
                             tabindex="-1"
@@ -42237,19 +42237,19 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id"
+                    class="MuiTableRow-root-id DiscountCategories-tableRow-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -42260,22 +42260,22 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -42306,34 +42306,34 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -42412,12 +42412,12 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -42437,22 +42437,22 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -42466,13 +42466,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -42483,19 +42483,19 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -42506,13 +42506,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -42523,7 +42523,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -42549,7 +42549,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Happy minute day!
         </div>
@@ -42557,34 +42557,34 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -42627,28 +42627,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id SaleType-root-id"
@@ -42767,28 +42767,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -42832,10 +42832,10 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id"
+            class="TabContainer-root-id"
           >
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
@@ -42854,21 +42854,21 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </span>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Eligible Products
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -42884,10 +42884,10 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -42906,35 +42906,35 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colName-id"
                       scope="col"
                     >
                       <span
-                        class="makeStyles-colNameLabel-id"
+                        class="DiscountProducts-colNameLabel-id"
                       >
                         Product Name
                       </span>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colType-id"
                       scope="col"
                     >
                       Product Type
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPublished-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colPublished-id"
                       scope="col"
                     >
                       Published
@@ -42952,20 +42952,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-footer-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                       colspan="5"
                     >
                       <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                       >
                         <div
-                          class="makeStyles-spacer-id"
+                          class="TablePagination-spacer-id"
                         />
                         <div
-                          class="makeStyles-root-id"
+                          class="TablePaginationActions-root-id"
                         >
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                             data-tc="button-pagination-back"
                             disabled=""
                             tabindex="-1"
@@ -42992,7 +42992,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                             </span>
                           </button>
                           <button
-                            class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                             data-tc="button-pagination-next"
                             tabindex="0"
                             type="button"
@@ -43026,31 +43026,31 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -43058,28 +43058,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Orange Juice
                         </div>
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                     >
                       Juice
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -43105,31 +43105,31 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -43137,28 +43137,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Carrot Juice
                         </div>
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                     >
                       Juice
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -43184,31 +43184,31 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -43216,28 +43216,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Bean Juice
                         </div>
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                     >
                       Juice
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -43263,31 +43263,31 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -43295,28 +43295,28 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         >
                           Black Hoodie
                         </div>
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                     >
                       Top (clothing)
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colPublished-id"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Published
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -43346,34 +43346,34 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -43450,12 +43450,12 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -43475,22 +43475,22 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -43506,7 +43506,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 Happy minute day!
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -43519,13 +43519,13 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 30%
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -43538,7 +43538,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 Jan 3, 2019
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -43570,7 +43570,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Sales
       </div>
@@ -43578,7 +43578,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -43598,7 +43598,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -43609,25 +43609,25 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Sales
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -43639,14 +43639,14 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -43669,7 +43669,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -43688,37 +43688,37 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
                 scope="col"
               >
                 Value
@@ -43732,14 +43732,14 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -43778,10 +43778,10 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -43808,7 +43808,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -43842,30 +43842,30 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 Happy front day!
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <time
                   class=""
@@ -43876,41 +43876,41 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 40%
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 Happy minute day!
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <time
                   class=""
@@ -43921,41 +43921,41 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 $30.00
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 Happy class day!
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <time
                   class=""
@@ -43966,41 +43966,41 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 10%
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 Happy human day!
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <time
                   class=""
@@ -44011,41 +44011,41 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 20%
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 Happy year day!
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <time
                   class=""
@@ -44056,12 +44056,12 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 10%
               </td>
@@ -44085,7 +44085,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Sales
       </div>
@@ -44093,7 +44093,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -44113,7 +44113,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -44124,25 +44124,25 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Sales
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -44154,14 +44154,14 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -44184,7 +44184,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -44203,37 +44203,37 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
                 scope="col"
               >
                 Value
@@ -44247,14 +44247,14 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -44293,10 +44293,10 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -44323,7 +44323,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -44363,49 +44363,49 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -44430,7 +44430,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Sales
       </div>
@@ -44438,7 +44438,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -44458,7 +44458,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -44469,25 +44469,25 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Sales
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -44499,14 +44499,14 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -44529,7 +44529,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -44544,25 +44544,25 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
                 scope="col"
               >
                 Value
@@ -44576,14 +44576,14 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -44622,10 +44622,10 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -44652,7 +44652,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -44715,7 +44715,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Voucher
         </div>
@@ -44723,27 +44723,27 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -44759,10 +44759,10 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -44805,34 +44805,34 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
@@ -45002,22 +45002,22 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -45043,7 +45043,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                     value="0"
                   />
                   <div
-                    class="makeStyles-adornment-id"
+                    class="TextFieldWithChoice-adornment-id"
                   >
                     <span
                       class="MuiTypography-root-id MuiTypography-caption-id"
@@ -45068,24 +45068,24 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerOrder"
                     type="checkbox"
                     value="false"
@@ -45105,28 +45105,28 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Minimum Requirements
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -45295,28 +45295,28 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Usage Limit
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -45325,12 +45325,12 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasUsageLimit"
                     type="checkbox"
                     value="false"
@@ -45346,12 +45346,12 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerCustomer"
                     type="checkbox"
                     value="false"
@@ -45366,34 +45366,34 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -45470,12 +45470,12 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -45508,7 +45508,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Voucher
         </div>
@@ -45516,27 +45516,27 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -45552,10 +45552,10 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -45603,34 +45603,34 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
@@ -45805,22 +45805,22 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -45846,7 +45846,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                     value="0"
                   />
                   <div
-                    class="makeStyles-adornment-id"
+                    class="TextFieldWithChoice-adornment-id"
                   >
                     <span
                       class="MuiTypography-root-id MuiTypography-caption-id"
@@ -45871,24 +45871,24 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerOrder"
                     type="checkbox"
                     value="false"
@@ -45908,28 +45908,28 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Minimum Requirements
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -46098,28 +46098,28 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Usage Limit
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -46128,12 +46128,12 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasUsageLimit"
                     type="checkbox"
                     value="false"
@@ -46149,12 +46149,12 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerCustomer"
                     type="checkbox"
                     value="false"
@@ -46169,34 +46169,34 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -46283,12 +46283,12 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -46321,7 +46321,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           DISCOUNT
         </div>
@@ -46329,34 +46329,34 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -46400,34 +46400,34 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
@@ -46594,28 +46594,28 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -46641,7 +46641,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                     value="25"
                   />
                   <div
-                    class="makeStyles-adornment-id"
+                    class="TextFieldWithChoice-adornment-id"
                   >
                     <span
                       class="MuiTypography-root-id MuiTypography-caption-id"
@@ -46666,10 +46666,10 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
@@ -46788,21 +46788,21 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerOrder"
                     type="checkbox"
                     value="false"
@@ -46822,34 +46822,34 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Minimum Requirements
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -47016,7 +47016,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -47056,28 +47056,28 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Usage Limit
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -47086,12 +47086,12 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasUsageLimit"
                     type="checkbox"
                     value="false"
@@ -47107,12 +47107,12 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerCustomer"
                     type="checkbox"
                     value="false"
@@ -47127,34 +47127,34 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -47231,12 +47231,12 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -47256,22 +47256,22 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -47287,7 +47287,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 DISCOUNT
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47300,7 +47300,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 Entire order
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47313,13 +47313,13 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 $25.00
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47332,7 +47332,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 Nov 27, 2018
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47345,13 +47345,13 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 -
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47364,7 +47364,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 $200.00
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47397,7 +47397,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           DISCOUNT
         </div>
@@ -47405,34 +47405,34 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -47481,34 +47481,34 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
@@ -47680,28 +47680,28 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -47727,7 +47727,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                     value="25"
                   />
                   <div
-                    class="makeStyles-adornment-id"
+                    class="TextFieldWithChoice-adornment-id"
                   >
                     <span
                       class="MuiTypography-root-id MuiTypography-caption-id"
@@ -47757,10 +47757,10 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
@@ -47884,21 +47884,21 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 </p>
               </div>
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerOrder"
                     type="checkbox"
                     value="false"
@@ -47918,34 +47918,34 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Minimum Requirements
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -48112,7 +48112,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -48157,28 +48157,28 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Usage Limit
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -48187,12 +48187,12 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasUsageLimit"
                     type="checkbox"
                     value="false"
@@ -48208,12 +48208,12 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerCustomer"
                     type="checkbox"
                     value="false"
@@ -48228,34 +48228,34 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -48342,12 +48342,12 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -48367,22 +48367,22 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -48398,7 +48398,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 DISCOUNT
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48411,7 +48411,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 Entire order
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48424,13 +48424,13 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 $25.00
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48443,7 +48443,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 Nov 27, 2018
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48456,13 +48456,13 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 -
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48475,7 +48475,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 $200.00
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48508,10 +48508,10 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -48521,34 +48521,34 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -48592,34 +48592,34 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Discount Type
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
@@ -48792,28 +48792,28 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Value
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -48840,7 +48840,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                     value="0"
                   />
                   <div
-                    class="makeStyles-adornment-id"
+                    class="TextFieldWithChoice-adornment-id"
                   >
                     <span
                       class="MuiTypography-root-id MuiTypography-caption-id"
@@ -48865,10 +48865,10 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
@@ -48991,22 +48991,22 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id VoucherValue-hr-id"
+                class="Hr-root-id VoucherValue-hr-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="applyOncePerOrder"
                     type="checkbox"
@@ -49027,34 +49027,34 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Minimum Requirements
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -49229,28 +49229,28 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Usage Limit
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -49259,12 +49259,12 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasUsageLimit"
                     type="checkbox"
                     value="false"
@@ -49280,12 +49280,12 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="applyOncePerCustomer"
                     type="checkbox"
                     value="false"
@@ -49300,34 +49300,34 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Active Dates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -49406,12 +49406,12 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasEndDate"
                     type="checkbox"
                     value="false"
@@ -49431,22 +49431,22 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Summary
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -49460,13 +49460,13 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49477,13 +49477,13 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49494,19 +49494,19 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49517,13 +49517,13 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49534,19 +49534,19 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49557,13 +49557,13 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-caption-id"
@@ -49574,7 +49574,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -49599,7 +49599,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Vouchers
       </div>
@@ -49607,7 +49607,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -49627,7 +49627,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -49638,25 +49638,25 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Vouchers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -49668,14 +49668,14 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -49698,7 +49698,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -49717,49 +49717,49 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colName-id"
                 scope="col"
               >
                 Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
                 scope="col"
               >
                 Min. Spent
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
                 scope="col"
               >
                 Value
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
                 scope="col"
               >
                 Uses
@@ -49773,14 +49773,14 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -49819,10 +49819,10 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -49849,7 +49849,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -49883,35 +49883,35 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
               >
                 FREE2019
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
               >
                 <time
                   class=""
@@ -49922,51 +49922,51 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
               >
                 100%
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
               >
                 -
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
               >
                 FREE2020
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
               >
                 $200.00
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
               >
                 <time
                   class=""
@@ -49977,17 +49977,17 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
               >
                 $25.00
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
               >
                 150
               </td>
@@ -50011,7 +50011,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Vouchers
       </div>
@@ -50019,7 +50019,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -50039,7 +50039,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -50050,25 +50050,25 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Vouchers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -50080,14 +50080,14 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -50110,7 +50110,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -50129,49 +50129,49 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colName-id"
                 scope="col"
               >
                 Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
                 scope="col"
               >
                 Min. Spent
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
                 scope="col"
               >
                 Value
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
                 scope="col"
               >
                 Uses
@@ -50185,14 +50185,14 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -50231,10 +50231,10 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -50261,7 +50261,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -50301,67 +50301,67 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -50386,7 +50386,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Vouchers
       </div>
@@ -50394,7 +50394,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -50414,7 +50414,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -50425,25 +50425,25 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Vouchers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -50455,14 +50455,14 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -50485,7 +50485,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -50500,37 +50500,37 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colName-id"
                 scope="col"
               >
                 Code
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colMinSpent-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
                 scope="col"
               >
                 Min. Spent
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colStart-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
                 scope="col"
               >
                 Starts
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colEnd-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
                 scope="col"
               >
                 Ends
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colValue-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
                 scope="col"
               >
                 Value
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colUses-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
                 scope="col"
               >
                 Uses
@@ -50544,14 +50544,14 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -50590,10 +50590,10 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -50620,7 +50620,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -50676,22 +50676,22 @@ exports[`Storyshots Views / Error page default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="ErrorPage-root-id"
   >
     <div
-      class="makeStyles-container-id"
+      class="ErrorPage-container-id"
     >
       <div
-        class="makeStyles-innerContainer-id"
+        class="ErrorPage-innerContainer-id"
       >
         <div>
           <div
-            class="MuiTypography-root-id makeStyles-upperHeader-id MuiTypography-h4-id"
+            class="MuiTypography-root-id ErrorPage-upperHeader-id MuiTypography-h4-id"
           >
             Ooops!...
           </div>
           <div
-            class="MuiTypography-root-id makeStyles-bottomHeader-id MuiTypography-h3-id"
+            class="MuiTypography-root-id ErrorPage-bottomHeader-id MuiTypography-h3-id"
           >
             Error
           </div>
@@ -50708,7 +50708,7 @@ exports[`Storyshots Views / Error page default 1`] = `
         </div>
         <div>
           <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id makeStyles-button-id MuiButton-containedPrimary-id"
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ErrorPage-button-id MuiButton-containedPrimary-id"
             tabindex="0"
             type="button"
           >
@@ -50722,7 +50722,7 @@ exports[`Storyshots Views / Error page default 1`] = `
       </div>
       <div>
         <span
-          class="isvg pending makeStyles-notFoundImage-id"
+          class="isvg pending ErrorPage-notFoundImage-id"
         />
       </div>
     </div>
@@ -50738,55 +50738,55 @@ exports[`Storyshots Views / HomePage default 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         Hello there, admin@example.com
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         Here is some information we gathered about your store
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
-          class="makeStyles-cardContainer-id"
+          class="HomePage-cardContainer-id"
         >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Sales
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   $57.15
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -50806,30 +50806,30 @@ exports[`Storyshots Views / HomePage default 1`] = `
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Orders
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   1
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -50859,7 +50859,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
@@ -50877,7 +50877,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -50905,7 +50905,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -50933,7 +50933,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -50953,28 +50953,28 @@ exports[`Storyshots Views / HomePage default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Top Products
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -50986,16 +50986,16 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id HomeProductListCard-tableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-avatarSpacing-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id HomeProductListCard-avatarProps-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -51003,12 +51003,12 @@ exports[`Storyshots Views / HomePage default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       />
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-label-id"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
@@ -51041,7 +51041,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div>
@@ -51049,22 +51049,22 @@ exports[`Storyshots Views / HomePage default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Activity
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <ul
             class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
@@ -51397,24 +51397,24 @@ exports[`Storyshots Views / HomePage loading 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
         </span>
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
@@ -51422,37 +51422,37 @@ exports[`Storyshots Views / HomePage loading 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
-          class="makeStyles-cardContainer-id"
+          class="HomePage-cardContainer-id"
         >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Sales
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                     style="width:5em"
                   >
                     ‌
@@ -51460,7 +51460,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -51480,27 +51480,27 @@ exports[`Storyshots Views / HomePage loading 1`] = `
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Orders
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                     style="width:5em"
                   >
                     ‌
@@ -51508,7 +51508,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -51538,7 +51538,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
@@ -51547,13 +51547,13 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51575,13 +51575,13 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51603,13 +51603,13 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51629,28 +51629,28 @@ exports[`Storyshots Views / HomePage loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Top Products
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -51665,13 +51665,13 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-avatarSpacing-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-avatarSpacing-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id makeStyles-avatarProps-id MuiAvatar-colorDefault-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id HomeProductListCard-avatarProps-id MuiAvatar-colorDefault-id"
                       >
                         <svg
                           aria-hidden="true"
@@ -51686,15 +51686,15 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       />
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-label-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-label-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -51706,7 +51706,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                       class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -51718,7 +51718,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div>
@@ -51726,22 +51726,22 @@ exports[`Storyshots Views / HomePage loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Activity
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <ul
             class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
@@ -51750,13 +51750,13 @@ exports[`Storyshots Views / HomePage loading 1`] = `
               class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
               <div
-                class="MuiListItemText-root-id makeStyles-loadingProducts-id MuiListItemText-dense-id"
+                class="MuiListItemText-root-id HomeActivityCard-loadingProducts-id MuiListItemText-dense-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -51779,55 +51779,55 @@ exports[`Storyshots Views / HomePage no data 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         Hello there, admin@example.com
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         Here is some information we gathered about your store
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
-          class="makeStyles-cardContainer-id"
+          class="HomePage-cardContainer-id"
         >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Sales
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   $57.15
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -51847,30 +51847,30 @@ exports[`Storyshots Views / HomePage no data 1`] = `
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Orders
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   1
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -51900,7 +51900,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
@@ -51918,7 +51918,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51946,7 +51946,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51974,7 +51974,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -51994,28 +51994,28 @@ exports[`Storyshots Views / HomePage no data 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Top Products
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -52030,7 +52030,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-noProducts-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-noProducts-id"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
@@ -52044,7 +52044,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div>
@@ -52052,28 +52052,28 @@ exports[`Storyshots Views / HomePage no data 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Activity
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <ul
             class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
           >
             <li
-              class="MuiListItem-root-id makeStyles-noProducts-id MuiListItem-dense-id MuiListItem-gutters-id"
+              class="MuiListItem-root-id HomeActivityCard-noProducts-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
               <div
                 class="MuiListItemText-root-id MuiListItemText-dense-id"
@@ -52101,25 +52101,25 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         Hello there, admin@example.com
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         Here is some information we gathered about your store
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
@@ -52132,13 +52132,13 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               />
             </table>
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div />
@@ -52155,55 +52155,55 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         Hello there, admin@example.com
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         Here is some information we gathered about your store
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
-          class="makeStyles-cardContainer-id"
+          class="HomePage-cardContainer-id"
         >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Sales
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   $57.15
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -52223,30 +52223,30 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-cardSpacing-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
               <div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardTitle-id MuiTypography-subtitle1-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                 >
                   Orders
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                 >
                   Today
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
+                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                 >
                   1
                 </div>
               </div>
               <div
-                class="makeStyles-iconBackground-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
                 <svg
                   aria-hidden="true"
@@ -52276,7 +52276,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
@@ -52294,7 +52294,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -52322,7 +52322,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -52342,7 +52342,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div>
@@ -52350,22 +52350,22 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Activity
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <ul
             class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
@@ -52698,25 +52698,25 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
     class="Container-root-id"
   >
     <div
-      class="makeStyles-headerContainer-id"
+      class="HomeHeader-headerContainer-id"
       data-tc="home-header"
     >
       <div
-        class="MuiTypography-root-id makeStyles-pageHeader-id MuiTypography-h4-id"
+        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
       >
         Hello there, admin@example.com
       </div>
       <div
-        class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-body1-id"
+        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
       >
         Here is some information we gathered about your store
       </div>
     </div>
     <div
-      class="makeStyles-spacer-id"
+      class="CardSpacer-spacer-id"
     />
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
@@ -52729,7 +52729,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
               class="MuiTable-root-id"
             >
               <tbody
-                class="MuiTableBody-root-id makeStyles-tableRow-id"
+                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
@@ -52744,7 +52744,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-arrowIcon-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -52764,7 +52764,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
       </div>
       <div />
@@ -52782,7 +52782,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
       class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -52801,22 +52801,22 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -52859,21 +52859,21 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Menu Items
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -52890,17 +52890,17 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-container-id"
+              class="MenuItems-container-id"
               style="min-height:224px;padding:;padding-top:"
             >
               <div
-                class="rst__tree makeStyles-root-id"
+                class="rst__tree MenuItems-root-id"
               >
                 <div
                   class="rst__node"
@@ -52915,16 +52915,16 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                     style="left:44px"
                   >
                     <div
-                      class="makeStyles-rowContainer-id"
+                      class="MenuItems-rowContainer-id"
                       style="margin-left:0"
                     >
                       <div
-                        class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                       >
                         <div>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-dragIcon-id"
+                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -52957,12 +52957,12 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="MuiTypography-root-id makeStyles-nodeTitle-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                         >
                           Accessories
                         </div>
                         <div
-                          class="makeStyles-spacer-id"
+                          class="MenuItems-spacer-id"
                         />
                         <button
                           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -52997,7 +52997,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-deleteButton-id MuiIconButton-colorPrimary-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                           tabindex="0"
                           type="button"
                         >
@@ -53038,16 +53038,16 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                     style="left:88px"
                   >
                     <div
-                      class="makeStyles-rowContainer-id"
+                      class="MenuItems-rowContainer-id"
                       style="margin-left:40px"
                     >
                       <div
-                        class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                       >
                         <div>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-dragIcon-id"
+                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -53080,12 +53080,12 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="MuiTypography-root-id makeStyles-nodeTitle-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                         >
                           Jewelry
                         </div>
                         <div
-                          class="makeStyles-spacer-id"
+                          class="MenuItems-spacer-id"
                         />
                         <button
                           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53120,7 +53120,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-deleteButton-id MuiIconButton-colorPrimary-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                           tabindex="0"
                           type="button"
                         >
@@ -53161,16 +53161,16 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                     style="left:88px"
                   >
                     <div
-                      class="makeStyles-rowContainer-id"
+                      class="MenuItems-rowContainer-id"
                       style="margin-left:40px"
                     >
                       <div
-                        class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                       >
                         <div>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-dragIcon-id"
+                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -53203,12 +53203,12 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="MuiTypography-root-id makeStyles-nodeTitle-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                         >
                           Glasses
                         </div>
                         <div
-                          class="makeStyles-spacer-id"
+                          class="MenuItems-spacer-id"
                         />
                         <button
                           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53243,7 +53243,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-deleteButton-id MuiIconButton-colorPrimary-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                           tabindex="0"
                           type="button"
                         >
@@ -53280,16 +53280,16 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                     style="left:44px"
                   >
                     <div
-                      class="makeStyles-rowContainer-id"
+                      class="MenuItems-rowContainer-id"
                       style="margin-left:0"
                     >
                       <div
-                        class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                       >
                         <div>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-dragIcon-id"
+                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -53322,12 +53322,12 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="MuiTypography-root-id makeStyles-nodeTitle-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                         >
                           Groceries
                         </div>
                         <div
-                          class="makeStyles-spacer-id"
+                          class="MenuItems-spacer-id"
                         />
                         <button
                           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53362,7 +53362,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-deleteButton-id MuiIconButton-colorPrimary-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                           tabindex="0"
                           type="button"
                         >
@@ -53399,16 +53399,16 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                     style="left:44px"
                   >
                     <div
-                      class="makeStyles-rowContainer-id"
+                      class="MenuItems-rowContainer-id"
                       style="margin-left:0"
                     >
                       <div
-                        class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                       >
                         <div>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-dragIcon-id"
+                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -53441,12 +53441,12 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="MuiTypography-root-id makeStyles-nodeTitle-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                         >
                           Apparel
                         </div>
                         <div
-                          class="makeStyles-spacer-id"
+                          class="MenuItems-spacer-id"
                         />
                         <button
                           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53481,7 +53481,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-deleteButton-id MuiIconButton-colorPrimary-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                           tabindex="0"
                           type="button"
                         >
@@ -53508,7 +53508,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
               </div>
             </div>
             <div
-              class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53539,7 +53539,7 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
       class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -53558,22 +53558,22 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -53617,21 +53617,21 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Menu Items
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -53648,23 +53648,23 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-container-id"
+              class="MenuItems-container-id"
               style="min-height:56px;padding:0 24px;padding-top:20px"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </div>
             <div
-              class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53695,7 +53695,7 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
       class="Container-root-id"
     >
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -53714,22 +53714,22 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -53772,21 +53772,21 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Menu Items
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -53803,21 +53803,21 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-container-id"
+              class="MenuItems-container-id"
               style="min-height:-56px;padding:;padding-top:"
             >
               <div
-                class="rst__tree makeStyles-root-id"
+                class="rst__tree MenuItems-root-id"
               >
                 <div>
                   <div
-                    class="MuiPaper-root-id MuiPaper-elevation0-id makeStyles-row-id MuiPaper-rounded-id"
+                    class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
@@ -53829,7 +53829,7 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
               </div>
             </div>
             <div
-              class="MuiCardActions-root-id makeStyles-actions-id MuiCardActions-spacing-id"
+              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -53862,7 +53862,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Navigation
       </div>
@@ -53870,7 +53870,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -53906,25 +53906,25 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colTitle-id"
                 scope="col"
               >
                 Menu Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
                 scope="col"
               >
                 Items
@@ -53942,14 +53942,14 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -53988,10 +53988,10 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -54018,7 +54018,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -54052,35 +54052,35 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
               >
                 navbar
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
               >
                 3
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -54106,35 +54106,35 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
               >
                 footer
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
               >
                 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -54178,7 +54178,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Navigation
       </div>
@@ -54186,7 +54186,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -54223,13 +54223,13 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -54237,13 +54237,13 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colTitle-id"
                 scope="col"
               >
                 Menu Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
                 scope="col"
               >
                 Items
@@ -54261,14 +54261,14 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -54307,10 +54307,10 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -54337,7 +54337,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -54372,19 +54372,19 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-row-id"
+              class="MuiTableRow-root-id MenuList-row-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -54392,25 +54392,25 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -54455,7 +54455,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Navigation
       </div>
@@ -54463,7 +54463,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -54495,13 +54495,13 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colTitle-id"
                 scope="col"
               >
                 Menu Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colItems-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
                 scope="col"
               >
                 Items
@@ -54519,14 +54519,14 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -54565,10 +54565,10 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -54595,7 +54595,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -54651,22 +54651,22 @@ exports[`Storyshots Views / Not found error page default 1`] = `
   style="padding:24px"
 >
   <div
-    class="makeStyles-root-id"
+    class="NotFoundPage-root-id"
   >
     <div
-      class="makeStyles-container-id"
+      class="NotFoundPage-container-id"
     >
       <div
-        class="makeStyles-innerContainer-id"
+        class="NotFoundPage-innerContainer-id"
       >
         <div>
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-h3-id"
+            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h3-id"
           >
             Ooops!...
           </div>
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-h4-id"
+            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h4-id"
           >
             Something's missing
           </div>
@@ -54678,7 +54678,7 @@ exports[`Storyshots Views / Not found error page default 1`] = `
         </div>
         <div>
           <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id makeStyles-button-id MuiButton-containedPrimary-id"
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NotFoundPage-button-id MuiButton-containedPrimary-id"
             tabindex="0"
             type="button"
           >
@@ -54692,7 +54692,7 @@ exports[`Storyshots Views / Not found error page default 1`] = `
       </div>
       <div>
         <span
-          class="isvg pending makeStyles-notFoundImage-id"
+          class="isvg pending NotFoundPage-notFoundImage-id"
         />
       </div>
     </div>
@@ -54711,7 +54711,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Draft Orders
       </div>
@@ -54719,7 +54719,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -54739,7 +54739,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -54750,25 +54750,25 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Drafts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -54780,14 +54780,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -54810,7 +54810,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -54829,37 +54829,37 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -54873,14 +54873,14 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -54919,10 +54919,10 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -54949,7 +54949,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -54983,30 +54983,30 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #20
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55017,41 +55017,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Laura Stone 1 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $305.17
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #19
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55062,41 +55062,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Elizabeth Vaughn
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $1,215.89
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #18
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55107,41 +55107,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $321.71
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #17
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55152,41 +55152,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Aaron Randall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $271.95
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #16
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55197,41 +55197,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $335.84
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #15
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55242,41 +55242,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Jenna Villa
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $1,042.15
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #14
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55287,41 +55287,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $213.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #13
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55332,41 +55332,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $367.03
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #12
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55377,41 +55377,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Denise Freeman
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $298.76
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #11
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55422,41 +55422,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 James Ball
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $663.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #10
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55467,41 +55467,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $280.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #9
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55512,41 +55512,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Melissa Simon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $234.93
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #8
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55557,41 +55557,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Justin Mccoy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $485.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #7
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55602,41 +55602,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $223.54
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #6
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55647,41 +55647,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Bradley Ford
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $237.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #5
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55692,41 +55692,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $453.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #4
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55737,41 +55737,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Lauren Watson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $812.67
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #3
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55782,41 +55782,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Mark Lee
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $481.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55827,41 +55827,41 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Kara Murphy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $569.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 #1
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <time
                   class=""
@@ -55872,12 +55872,12 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 $557.00
               </td>
@@ -55901,7 +55901,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Draft Orders
       </div>
@@ -55909,7 +55909,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -55930,7 +55930,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -55941,25 +55941,25 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Drafts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -55971,14 +55971,14 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -56001,7 +56001,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -56020,13 +56020,13 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -56034,25 +56034,25 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -56066,14 +56066,14 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -56112,10 +56112,10 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -56142,7 +56142,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -56183,13 +56183,13 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -56197,37 +56197,37 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -56252,7 +56252,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Draft Orders
       </div>
@@ -56260,7 +56260,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -56280,7 +56280,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -56291,25 +56291,25 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Drafts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -56321,14 +56321,14 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -56351,7 +56351,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -56366,25 +56366,25 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -56398,14 +56398,14 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="5"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -56444,10 +56444,10 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -56474,7 +56474,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -56536,7 +56536,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -56544,7 +56544,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -56564,39 +56564,39 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -56605,29 +56605,29 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -56638,16 +56638,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -56655,24 +56655,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -56682,43 +56682,43 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -56727,29 +56727,29 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -56760,16 +56760,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -56777,24 +56777,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -56804,43 +56804,43 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -56849,29 +56849,29 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -56882,16 +56882,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -56899,24 +56899,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -56926,38 +56926,38 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -56968,7 +56968,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -56981,7 +56981,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -56994,20 +56994,20 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -57016,13 +57016,13 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -57030,7 +57030,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -57040,19 +57040,19 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -57062,15 +57062,15 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -57149,13 +57149,13 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -57163,7 +57163,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -57183,43 +57183,43 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
@@ -57250,16 +57250,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
@@ -57272,28 +57272,28 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -57322,7 +57322,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -57330,13 +57330,13 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -57376,39 +57376,39 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -57417,29 +57417,29 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -57450,16 +57450,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -57467,24 +57467,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -57509,36 +57509,36 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -57562,16 +57562,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -57580,29 +57580,29 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -57613,16 +57613,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -57630,24 +57630,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -57672,36 +57672,36 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -57725,16 +57725,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -57743,29 +57743,29 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -57776,16 +57776,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -57793,24 +57793,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -57835,38 +57835,38 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -57877,7 +57877,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -57890,7 +57890,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -57903,20 +57903,20 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -57925,13 +57925,13 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -57939,7 +57939,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -57949,19 +57949,19 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -57970,7 +57970,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -58022,15 +58022,15 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -58109,13 +58109,13 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -58123,7 +58123,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -58143,48 +58143,48 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -58225,21 +58225,21 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -58262,28 +58262,28 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -58312,7 +58312,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -58320,13 +58320,13 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -58366,39 +58366,39 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -58407,29 +58407,29 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -58440,16 +58440,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -58457,24 +58457,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -58499,36 +58499,36 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -58552,16 +58552,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -58570,29 +58570,29 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -58603,16 +58603,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -58620,24 +58620,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -58662,36 +58662,36 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -58715,16 +58715,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -58733,29 +58733,29 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -58766,16 +58766,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -58783,24 +58783,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -58825,38 +58825,38 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -58867,7 +58867,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -58880,7 +58880,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -58893,20 +58893,20 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -58915,13 +58915,13 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -58929,7 +58929,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -58939,19 +58939,19 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -58960,7 +58960,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -59012,15 +59012,15 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -59099,13 +59099,13 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -59113,7 +59113,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -59133,48 +59133,48 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -59215,21 +59215,21 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -59252,28 +59252,28 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -59302,10 +59302,10 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
@@ -59315,13 +59315,13 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -59349,49 +59349,49 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
       class="OrderDetailsPage-date-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
         style="width:10em"
       >
         ‌
       </span>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -59400,29 +59400,29 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -59436,13 +59436,13 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                       >
                         <svg
                           aria-hidden="true"
@@ -59457,10 +59457,10 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <span
-                          class="makeStyles-skeleton-id"
+                          class="Skeleton-skeleton-id"
                         >
                           ‌
                         </span>
@@ -59468,28 +59468,28 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59500,38 +59500,38 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -59540,16 +59540,16 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   </td>
                   <td>
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59561,16 +59561,16 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   </td>
                   <td>
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59582,33 +59582,33 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   </td>
                   <td>
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59618,13 +59618,13 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -59632,10 +59632,10 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59646,26 +59646,26 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -59676,18 +59676,18 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
           >
             ‌
           </span>
@@ -59698,48 +59698,48 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -59756,27 +59756,27 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
               </div>
             </div>
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -59793,41 +59793,41 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
               </div>
             </div>
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
@@ -59850,7 +59850,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -59858,13 +59858,13 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -59904,39 +59904,39 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -59945,29 +59945,29 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -59978,16 +59978,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -59995,24 +59995,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -60037,36 +60037,36 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -60090,16 +60090,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -60108,29 +60108,29 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -60141,16 +60141,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -60158,24 +60158,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -60200,36 +60200,36 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -60253,16 +60253,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -60271,29 +60271,29 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -60304,16 +60304,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -60321,24 +60321,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -60363,38 +60363,38 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -60405,7 +60405,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -60418,7 +60418,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -60431,20 +60431,20 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -60453,13 +60453,13 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -60467,7 +60467,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -60477,19 +60477,19 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -60498,7 +60498,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -60550,15 +60550,15 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -60637,13 +60637,13 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60651,7 +60651,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -60671,48 +60671,48 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -60753,21 +60753,21 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -60790,28 +60790,28 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -60840,7 +60840,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -60848,13 +60848,13 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -60894,39 +60894,39 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -60935,29 +60935,29 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -60968,16 +60968,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -60985,24 +60985,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -61027,36 +61027,36 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -61080,16 +61080,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -61098,29 +61098,29 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -61131,16 +61131,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -61148,24 +61148,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -61190,36 +61190,36 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -61243,16 +61243,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -61261,29 +61261,29 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -61294,16 +61294,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -61311,24 +61311,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -61353,38 +61353,38 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -61395,7 +61395,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -61408,7 +61408,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -61421,20 +61421,20 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -61443,13 +61443,13 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -61457,7 +61457,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -61467,19 +61467,19 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -61488,7 +61488,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -61540,15 +61540,15 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -61627,13 +61627,13 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -61641,7 +61641,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -61661,48 +61661,48 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -61743,21 +61743,21 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -61780,28 +61780,28 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -61830,7 +61830,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -61838,13 +61838,13 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -61884,39 +61884,39 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -61925,29 +61925,29 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -61958,16 +61958,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -61975,24 +61975,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -62017,36 +62017,36 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -62070,16 +62070,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -62088,29 +62088,29 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -62121,16 +62121,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -62138,24 +62138,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -62180,36 +62180,36 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -62233,16 +62233,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -62251,29 +62251,29 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -62284,16 +62284,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -62301,24 +62301,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -62343,38 +62343,38 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -62385,7 +62385,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -62398,7 +62398,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -62411,20 +62411,20 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -62433,13 +62433,13 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -62447,7 +62447,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -62457,19 +62457,19 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -62478,7 +62478,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -62530,15 +62530,15 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -62617,13 +62617,13 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62631,7 +62631,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -62651,48 +62651,48 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -62714,21 +62714,21 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -62770,28 +62770,28 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -62820,7 +62820,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -62828,13 +62828,13 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -62874,39 +62874,39 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -62915,29 +62915,29 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -62948,16 +62948,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -62965,24 +62965,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -63007,36 +63007,36 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -63060,16 +63060,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -63078,29 +63078,29 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -63111,16 +63111,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -63128,24 +63128,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -63170,36 +63170,36 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -63223,16 +63223,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -63241,29 +63241,29 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -63274,16 +63274,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -63291,24 +63291,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -63333,38 +63333,38 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -63375,7 +63375,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -63388,7 +63388,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -63401,20 +63401,20 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -63423,13 +63423,13 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -63437,7 +63437,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -63447,19 +63447,19 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -63468,7 +63468,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -63520,15 +63520,15 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -63607,13 +63607,13 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -63621,7 +63621,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -63641,48 +63641,48 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -63723,21 +63723,21 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -63760,28 +63760,28 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -63810,7 +63810,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -63818,13 +63818,13 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -63864,39 +63864,39 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -63905,29 +63905,29 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -63938,16 +63938,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -63955,24 +63955,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -63997,36 +63997,36 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -64050,16 +64050,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -64068,29 +64068,29 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -64101,16 +64101,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -64118,24 +64118,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -64160,36 +64160,36 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -64213,16 +64213,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -64231,29 +64231,29 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -64264,16 +64264,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -64281,24 +64281,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -64323,38 +64323,38 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fully paid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -64365,7 +64365,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -64378,7 +64378,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -64391,20 +64391,20 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -64413,13 +64413,13 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -64427,7 +64427,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -64437,19 +64437,19 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -64458,7 +64458,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -64510,15 +64510,15 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -64597,13 +64597,13 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -64611,7 +64611,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -64631,48 +64631,48 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -64713,21 +64713,21 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -64750,28 +64750,28 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -64800,7 +64800,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -64808,13 +64808,13 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -64854,39 +64854,39 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -64895,29 +64895,29 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -64928,16 +64928,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -64945,24 +64945,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -64987,36 +64987,36 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -65040,16 +65040,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -65058,29 +65058,29 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -65091,16 +65091,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -65108,24 +65108,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -65150,36 +65150,36 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -65203,16 +65203,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -65221,29 +65221,29 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -65254,16 +65254,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -65271,24 +65271,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -65313,38 +65313,38 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -65355,7 +65355,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -65368,7 +65368,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -65381,20 +65381,20 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -65403,13 +65403,13 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -65417,7 +65417,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -65427,19 +65427,19 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -65448,7 +65448,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -65500,15 +65500,15 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -65587,13 +65587,13 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -65601,7 +65601,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -65621,48 +65621,48 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -65703,21 +65703,21 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -65740,28 +65740,28 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -65790,7 +65790,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -65798,13 +65798,13 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -65844,39 +65844,39 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -65885,29 +65885,29 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -65918,16 +65918,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -65935,24 +65935,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -65977,36 +65977,36 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -66030,16 +66030,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -66048,29 +66048,29 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -66081,16 +66081,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -66098,24 +66098,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -66140,36 +66140,36 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -66193,16 +66193,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -66211,29 +66211,29 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -66244,16 +66244,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -66261,24 +66261,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -66303,38 +66303,38 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -66345,7 +66345,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -66358,7 +66358,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -66371,20 +66371,20 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -66393,13 +66393,13 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -66407,7 +66407,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -66417,19 +66417,19 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -66438,7 +66438,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -66490,15 +66490,15 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -66577,13 +66577,13 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -66591,7 +66591,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -66611,48 +66611,48 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -66693,21 +66693,21 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -66730,28 +66730,28 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -66780,7 +66780,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -66788,13 +66788,13 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -66834,39 +66834,39 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -66875,29 +66875,29 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -66908,16 +66908,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -66925,24 +66925,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -66967,36 +66967,36 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -67020,16 +67020,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -67038,29 +67038,29 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -67071,16 +67071,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -67088,24 +67088,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -67130,36 +67130,36 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -67183,16 +67183,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -67201,29 +67201,29 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -67234,16 +67234,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -67251,24 +67251,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -67293,38 +67293,38 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fully refunded
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -67335,7 +67335,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -67348,7 +67348,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -67361,20 +67361,20 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -67383,13 +67383,13 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -67397,7 +67397,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -67407,19 +67407,19 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -67428,7 +67428,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -67480,15 +67480,15 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -67567,13 +67567,13 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -67581,7 +67581,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -67601,48 +67601,48 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -67683,21 +67683,21 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -67720,28 +67720,28 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -67770,7 +67770,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -67778,13 +67778,13 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -67824,39 +67824,39 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -67865,29 +67865,29 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -67898,16 +67898,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -67915,24 +67915,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -67957,36 +67957,36 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -68010,16 +68010,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -68028,29 +68028,29 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -68061,16 +68061,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -68078,24 +68078,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -68120,36 +68120,36 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -68173,16 +68173,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -68191,29 +68191,29 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -68224,16 +68224,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -68241,24 +68241,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -68283,38 +68283,38 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -68325,7 +68325,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -68338,7 +68338,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -68351,20 +68351,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -68373,13 +68373,13 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -68387,7 +68387,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -68397,19 +68397,19 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -68418,7 +68418,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -68470,15 +68470,15 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -68557,13 +68557,13 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -68571,7 +68571,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -68591,48 +68591,48 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -68673,21 +68673,21 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -68710,28 +68710,28 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -68760,7 +68760,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
       class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #9
       </div>
@@ -68768,13 +68768,13 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -68814,39 +68814,39 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unfulfilled (3)
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -68855,29 +68855,29 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderUnfulfilledItems-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -68888,16 +68888,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -68905,24 +68905,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Watkins-Gonzalez (Soft)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
                     3
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                   >
                     $18.51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                   >
                     $55.53
                   </td>
@@ -68947,36 +68947,36 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-2
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -69000,16 +69000,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -69018,29 +69018,29 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -69051,16 +69051,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -69068,24 +69068,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -69110,36 +69110,36 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Fulfilled (1)
                 <div
-                  class="MuiTypography-root-id makeStyles-orderNumber-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                 >
                   #9-1
                 </div>
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <div>
                 <button
                   aria-haspopup="true"
                   aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -69163,16 +69163,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderFulfillment-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -69181,29 +69181,29 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderFulfillment-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                     scope="col"
                   >
                     Total
@@ -69214,16 +69214,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-clickableRow-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id OrderFulfillment-clickableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -69231,24 +69231,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         Williams, Garcia and Walker (XS)
                       </div>
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
                     1
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                   >
                     $79.71
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                   >
                     $79.71
                   </td>
@@ -69273,38 +69273,38 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               <div
-                class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -69315,7 +69315,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     5 items
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $214.95
                   </td>
@@ -69328,7 +69328,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     does not apply
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
@@ -69341,20 +69341,20 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     Registred priority
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $19.98
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Total
                   </td>
                   <td />
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -69363,13 +69363,13 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderPayment-root-id"
             >
               <tbody>
                 <tr>
@@ -69377,7 +69377,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     Preauthorized amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $234.93
                   </td>
@@ -69387,19 +69387,19 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     Captured amount
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     $0.00
                   </td>
                 </tr>
                 <tr
-                  class="makeStyles-totalRow-id"
+                  class="OrderPayment-totalRow-id"
                 >
                   <td>
                     Outstanding Balance
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderPayment-textRight-id"
                   >
                     -$234.93
                   </td>
@@ -69408,7 +69408,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             </table>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -69460,15 +69460,15 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -69547,13 +69547,13 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               </div>
             </form>
             <div
-              class="makeStyles-root-id"
+              class="TimelineEvent-root-id"
             >
               <span
-                class="makeStyles-dot-id"
+                class="TimelineEvent-dot-id"
               />
               <div
-                class="makeStyles-noExpander-id"
+                class="TimelineEvent-noExpander-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -69561,7 +69561,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   Fulfilled 1 items
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-date-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                 >
                   <time
                     class=""
@@ -69581,48 +69581,48 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-userEmail-id MuiTypography-body1-id"
+              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
             >
               melissa.simon@example.com
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -69663,21 +69663,21 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             />
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -69700,28 +69700,28 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Notes
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -69747,10 +69747,10 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #24
       </div>
@@ -69758,13 +69758,13 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -69789,7 +69789,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDraftPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -69804,22 +69804,22 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Order Details
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -69835,16 +69835,16 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -69853,35 +69853,35 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderDraftDetailsProducts-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                     scope="col"
                   >
                     Total
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -69893,13 +69893,13 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -69907,7 +69907,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body2-id"
@@ -69923,11 +69923,11 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                   >
                     <form>
                       <div
-                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                       >
                         <div
                           class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -69958,17 +69958,17 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     </form>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                   >
                     $65.95
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
                     $131.90
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -69997,13 +69997,13 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -70011,7 +70011,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body2-id"
@@ -70027,11 +70027,11 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                   >
                     <form>
                       <div
-                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                       >
                         <div
                           class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -70062,17 +70062,17 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     </form>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                   >
                     $68.20
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
                     $136.40
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -70104,7 +70104,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderDraftDetailsSummary-root-id"
             >
               <tbody>
                 <tr>
@@ -70112,7 +70112,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     Subtotal
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $168.30
                   </td>
@@ -70127,7 +70127,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     Taxes (VAT included)
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $68.30
                   </td>
@@ -70137,7 +70137,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                     Total
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $168.30
                   </td>
@@ -70147,15 +70147,15 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -70241,15 +70241,15 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70265,10 +70265,10 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -70280,21 +70280,21 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70316,21 +70316,21 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70366,13 +70366,13 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
@@ -70382,13 +70382,13 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -70413,32 +70413,32 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDraftPage-date-id"
     >
       <span
-        class="makeStyles-skeleton-id"
+        class="Skeleton-skeleton-id"
         style="width:10em"
       >
         ‌
       </span>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Order Details
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70454,16 +70454,16 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
             >
               <tbody
                 class="MuiTableBody-root-id"
@@ -70472,13 +70472,13 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                       >
                         <svg
                           aria-hidden="true"
@@ -70493,10 +70493,10 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <span
-                          class="makeStyles-skeleton-id"
+                          class="Skeleton-skeleton-id"
                         >
                           ‌
                         </span>
@@ -70504,34 +70504,34 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -70563,7 +70563,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderDraftDetailsSummary-root-id"
             >
               <tbody>
                 <tr>
@@ -70571,7 +70571,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                     colspan="2"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -70582,7 +70582,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                     colspan="2"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -70593,7 +70593,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                     colspan="2"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -70604,7 +70604,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
                     colspan="2"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -70615,18 +70615,18 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
           >
             ‌
           </span>
@@ -70637,15 +70637,15 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70661,36 +70661,36 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -70707,27 +70707,27 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
               </div>
             </div>
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -70744,7 +70744,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
               </div>
             </div>
             <span
-              class="makeStyles-skeleton-id"
+              class="Skeleton-skeleton-id"
             >
               ‌
             </span>
@@ -70764,10 +70764,10 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #24
       </div>
@@ -70775,13 +70775,13 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -70806,7 +70806,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDraftPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -70821,22 +70821,22 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Order Details
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -70852,16 +70852,16 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
             >
               <thead
                 class="MuiTableHead-root-id"
@@ -70870,35 +70870,35 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                     scope="col"
                   >
                     <span
-                      class="makeStyles-colNameLabel-id"
+                      class="OrderDraftDetailsProducts-colNameLabel-id"
                     >
                       Product
                     </span>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                     scope="col"
                   >
                     Quantity
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                     scope="col"
                   >
                     Price
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                     scope="col"
                   >
                     Total
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -70910,13 +70910,13 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -70924,7 +70924,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body2-id"
@@ -70940,11 +70940,11 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                   >
                     <form>
                       <div
-                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                       >
                         <div
                           class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -70975,17 +70975,17 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     </form>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                   >
                     $65.95
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
                     $131.90
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -71014,13 +71014,13 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                   >
                     <div
-                      class="makeStyles-content-id"
+                      class="TableCellAvatar-content-id"
                     >
                       <div
-                        class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                       >
                         <img
                           class="MuiAvatar-img-id"
@@ -71028,7 +71028,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                         />
                       </div>
                       <div
-                        class="makeStyles-children-id"
+                        class="TableCellAvatar-children-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body2-id"
@@ -71044,11 +71044,11 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colQuantity-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                   >
                     <form>
                       <div
-                        class="MuiFormControl-root-id MuiTextField-root-id makeStyles-quantityField-id MuiFormControl-fullWidth-id"
+                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                       >
                         <div
                           class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -71079,17 +71079,17 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     </form>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                   >
                     $68.20
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                   >
                     $136.40
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -71121,7 +71121,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
             class="MuiCardContent-root-id"
           >
             <table
-              class="makeStyles-root-id"
+              class="OrderDraftDetailsSummary-root-id"
             >
               <tbody>
                 <tr>
@@ -71129,7 +71129,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     Subtotal
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $168.30
                   </td>
@@ -71144,7 +71144,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     Taxes (VAT included)
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $68.30
                   </td>
@@ -71154,7 +71154,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                     Total
                   </td>
                   <td
-                    class="makeStyles-textRight-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
                     $168.30
                   </td>
@@ -71164,15 +71164,15 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -71258,22 +71258,22 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -71285,21 +71285,21 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71321,21 +71321,21 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71371,10 +71371,10 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
     class="Container-root-id"
   >
     <div
-      class="ExtendedPageHeader-root-id makeStyles-header-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         #24
       </div>
@@ -71382,13 +71382,13 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div>
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
               tabindex="0"
               type="button"
             >
@@ -71413,7 +71413,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-date-id"
+      class="OrderDraftPage-date-id"
     >
       <div
         class="MuiTypography-root-id MuiTypography-caption-id"
@@ -71428,22 +71428,22 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Order Details
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71459,16 +71459,16 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
           >
             <table
-              class="MuiTable-root-id makeStyles-table-id"
+              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
             >
               <tbody
                 class="MuiTableBody-root-id"
@@ -71488,15 +71488,15 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="OrderHistory-root-id"
         >
           <div
-            class="MuiTypography-root-id makeStyles-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
             Order History
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="Timeline-root-id"
@@ -71582,15 +71582,15 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Customer
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71606,10 +71606,10 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -71621,21 +71621,21 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Shipping Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71657,21 +71657,21 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             </div>
           </div>
           <hr
-            class="makeStyles-root-id"
+            class="Hr-root-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="makeStyles-sectionHeader-id"
+              class="OrderCustomer-sectionHeader-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-sectionHeaderTitle-id MuiTypography-body1-id"
+                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
               >
                 Billing Address
               </div>
               <div
-                class="makeStyles-sectionHeaderToolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -71710,7 +71710,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Orders
       </div>
@@ -71718,7 +71718,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -71738,7 +71738,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -71749,25 +71749,25 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Orders
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -71780,18 +71780,18 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -71803,14 +71803,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -71833,7 +71833,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -71852,49 +71852,49 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colPayment-id"
                 scope="col"
               >
                 Payment
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colFulfillment-id"
                 scope="col"
               >
                 Fulfillment status
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -71908,14 +71908,14 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -71954,10 +71954,10 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -71984,7 +71984,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -72018,30 +72018,30 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #20
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72052,59 +72052,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Laura Stone 1 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $305.17
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #19
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72115,59 +72115,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Elizabeth Vaughn
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $1,215.89
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #18
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72178,59 +72178,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Draft
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $321.71
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #17
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72241,59 +72241,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Aaron Randall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $271.95
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #16
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72304,59 +72304,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $335.84
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #15
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72367,59 +72367,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Jenna Villa
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $1,042.15
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #14
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72430,59 +72430,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $213.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #13
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72493,59 +72493,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $367.03
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #12
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72556,59 +72556,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Denise Freeman
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $298.76
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #11
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72619,59 +72619,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 James Ball
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unfulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $663.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #10
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72682,59 +72682,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $280.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #9
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72745,59 +72745,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Melissa Simon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $234.93
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #8
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72808,59 +72808,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Justin Mccoy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $485.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #7
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72871,59 +72871,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $223.54
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #6
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72934,59 +72934,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Bradley Ford
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $237.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #5
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -72997,59 +72997,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $453.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #4
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -73060,59 +73060,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Lauren Watson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $812.67
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #3
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -73123,59 +73123,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Mark Lee
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $481.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -73186,59 +73186,59 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Kara Murphy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $569.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #1
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -73249,30 +73249,30 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $557.00
               </td>
@@ -73296,7 +73296,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Orders
       </div>
@@ -73304,7 +73304,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -73324,7 +73324,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -73335,25 +73335,25 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 All Orders
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -73366,18 +73366,18 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -73389,14 +73389,14 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -73419,7 +73419,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -73438,13 +73438,13 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -73452,37 +73452,37 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colPayment-id"
                 scope="col"
               >
                 Payment
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colFulfillment-id"
                 scope="col"
               >
                 Fulfillment status
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -73496,14 +73496,14 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -73542,10 +73542,10 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -73572,7 +73572,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -73613,13 +73613,13 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -73627,55 +73627,55 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -73700,7 +73700,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Orders
       </div>
@@ -73708,7 +73708,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -73728,7 +73728,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -73739,25 +73739,25 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Orders
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -73770,18 +73770,18 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -73793,14 +73793,14 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -73823,7 +73823,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -73838,37 +73838,37 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colPayment-id"
                 scope="col"
               >
                 Payment
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colFulfillment-id"
                 scope="col"
               >
                 Fulfillment status
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -73882,14 +73882,14 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -73928,10 +73928,10 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -73958,7 +73958,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -74020,7 +74020,7 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Orders
       </div>
@@ -74028,7 +74028,7 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -74048,7 +74048,7 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -74059,25 +74059,25 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Orders
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -74090,18 +74090,18 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -74113,14 +74113,14 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -74557,49 +74557,49 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colNumber-id"
                 scope="col"
               >
                 No. of Order
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colDate-id"
                 scope="col"
               >
                 Date
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colCustomer-id"
                 scope="col"
               >
                 Customer
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colPayment-id"
                 scope="col"
               >
                 Payment
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colFulfillment-id"
                 scope="col"
               >
                 Fulfillment status
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id OrderList-colTotal-id"
                 scope="col"
               >
                 Total
@@ -74613,14 +74613,14 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="7"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -74659,10 +74659,10 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -74689,7 +74689,7 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -74723,30 +74723,30 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #20
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -74757,59 +74757,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Laura Stone 1 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $305.17
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #19
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -74820,59 +74820,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Elizabeth Vaughn
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $1,215.89
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #18
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -74883,59 +74883,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 david.lawson@example.com
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Draft
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $321.71
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #17
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -74946,59 +74946,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Aaron Randall
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $271.95
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #16
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75009,59 +75009,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Laura Jensen
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $335.84
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #15
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75072,59 +75072,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Jenna Villa
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $1,042.15
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #14
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75135,59 +75135,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Wesley Davis
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $213.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #13
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75198,59 +75198,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $367.03
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #12
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75261,59 +75261,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Denise Freeman
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $298.76
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #11
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75324,59 +75324,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 James Ball
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unfulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $663.69
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #10
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75387,59 +75387,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Michael Martinez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Cancelled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $280.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #9
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75450,59 +75450,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Melissa Simon
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $234.93
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #8
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75513,59 +75513,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Justin Mccoy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $485.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #7
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75576,59 +75576,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Anthony Gonzalez
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $223.54
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #6
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75639,59 +75639,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Bradley Ford
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $237.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #5
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75702,59 +75702,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 David Lawson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $453.55
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #4
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75765,59 +75765,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Lauren Watson
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $812.67
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #3
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75828,59 +75828,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Mark Lee
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Unpaid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $481.41
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75891,59 +75891,59 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Kara Murphy
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $569.19
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNumber-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
               >
                 #1
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colDate-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
               >
                 <time
                   class=""
@@ -75954,30 +75954,30 @@ exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
                 </time>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCustomer-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
               >
                 Curtis Bailey
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPayment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Fully paid
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colFulfillment-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-neutralDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
                 >
                   Partially fulfilled
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTotal-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
               >
                 $557.00
               </td>
@@ -76002,7 +76002,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           About
         </div>
@@ -76010,34 +76010,34 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -76078,16 +76078,16 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Content
                   </div>
@@ -76112,7 +76112,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -76133,7 +76133,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -76337,7 +76337,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -76599,21 +76599,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -76629,10 +76629,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -76650,22 +76650,22 @@ Ctrl + K"
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 URL
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -76714,34 +76714,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -76749,7 +76749,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -76796,17 +76796,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -76854,24 +76854,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -76894,7 +76894,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           About
         </div>
@@ -76902,34 +76902,34 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -76975,16 +76975,16 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Content
                   </div>
@@ -77009,7 +77009,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -77030,7 +77030,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -77234,7 +77234,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -77496,21 +77496,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -77526,10 +77526,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -77547,22 +77547,22 @@ Ctrl + K"
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 URL
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -77611,34 +77611,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -77646,7 +77646,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -77693,17 +77693,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -77751,24 +77751,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -77791,10 +77791,10 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -77804,34 +77804,34 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -77873,16 +77873,16 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Content
                   </div>
@@ -77907,7 +77907,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -77928,7 +77928,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -78132,7 +78132,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -78190,21 +78190,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -78220,10 +78220,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -78241,22 +78241,22 @@ Ctrl + K"
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 URL
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -78306,34 +78306,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -78341,7 +78341,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -78390,17 +78390,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -78450,24 +78450,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -78489,7 +78489,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Pages
       </div>
@@ -78497,7 +78497,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -78533,31 +78533,31 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colTitle-id"
                 scope="col"
               >
                 Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colSlug-id"
                 scope="col"
               >
                 Slug
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colVisibility-id"
                 scope="col"
               >
                 Visibility
@@ -78571,14 +78571,14 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -78617,10 +78617,10 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -78647,7 +78647,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -78681,152 +78681,152 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   Not Published
                 </div>
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 About
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 about
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Published
                 </div>
@@ -78851,7 +78851,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Pages
       </div>
@@ -78859,7 +78859,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -78896,13 +78896,13 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -78910,19 +78910,19 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colTitle-id"
                 scope="col"
               >
                 Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colSlug-id"
                 scope="col"
               >
                 Slug
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colVisibility-id"
                 scope="col"
               >
                 Visibility
@@ -78936,14 +78936,14 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -78982,10 +78982,10 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -79012,7 +79012,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -79053,13 +79053,13 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -79067,28 +79067,28 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -79113,7 +79113,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Pages
       </div>
@@ -79121,7 +79121,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -79153,19 +79153,19 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTitle-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colTitle-id"
                 scope="col"
               >
                 Title
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colSlug-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colSlug-id"
                 scope="col"
               >
                 Slug
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colVisibility-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PageList-colVisibility-id"
                 scope="col"
               >
                 Visibility
@@ -79179,14 +79179,14 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -79225,10 +79225,10 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -79255,7 +79255,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -79330,7 +79330,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Username or account Details
         </div>
@@ -79338,12 +79338,12 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -79361,28 +79361,28 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Plugin Information and Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Plugin Name
             </div>
@@ -79392,7 +79392,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
               Username or account
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Description
             </div>
@@ -79402,13 +79402,13 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
               Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="MuiTypography-root-id makeStyles-status-id MuiTypography-body1-id"
+              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
             >
               Status
             </div>
@@ -79416,12 +79416,12 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="active"
                   type="checkbox"
                   value="true"
@@ -79436,7 +79436,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id PluginsDetailsPage-spacer-id"
+          class="Hr-root-id PluginsDetailsPage-spacer-id"
         />
         <div>
           <div
@@ -79455,28 +79455,28 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Plugin Settings
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -79520,7 +79520,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -79564,18 +79564,18 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="Use sandbox"
                       type="checkbox"
                       value="true"
@@ -79591,34 +79591,34 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Authorization
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div>
                   <div
@@ -79633,7 +79633,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                   </div>
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -79647,7 +79647,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                   </span>
                 </button>
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -79659,10 +79659,10 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id PluginAuthorization-hr-id"
               />
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -79670,7 +79670,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                   Password
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -79684,7 +79684,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                   </span>
                 </button>
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -79696,10 +79696,10 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id PluginAuthorization-hr-id"
               />
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -79707,10 +79707,10 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
                   Empty Password
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -79742,7 +79742,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Username or account Details
         </div>
@@ -79750,12 +79750,12 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -79773,28 +79773,28 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Plugin Information and Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Plugin Name
             </div>
@@ -79804,7 +79804,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
               Username or account
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Description
             </div>
@@ -79814,13 +79814,13 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
               Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="MuiTypography-root-id makeStyles-status-id MuiTypography-body1-id"
+              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
             >
               Status
             </div>
@@ -79828,12 +79828,12 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="active"
                   type="checkbox"
                   value="true"
@@ -79848,7 +79848,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id PluginsDetailsPage-spacer-id"
+          class="Hr-root-id PluginsDetailsPage-spacer-id"
         />
         <div>
           <div
@@ -79867,28 +79867,28 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Plugin Settings
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -79932,7 +79932,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -79976,18 +79976,18 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-item-id"
+                class="PluginSettings-item-id"
               >
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="Use sandbox"
                       type="checkbox"
                       value="true"
@@ -80003,34 +80003,34 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Authorization
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div>
                   <div
@@ -80045,7 +80045,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                   </div>
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -80059,7 +80059,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                   </span>
                 </button>
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -80071,10 +80071,10 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id PluginAuthorization-hr-id"
               />
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -80082,7 +80082,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                   Password
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -80096,7 +80096,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                   </span>
                 </button>
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -80108,10 +80108,10 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id makeStyles-hr-id"
+                class="Hr-root-id PluginAuthorization-hr-id"
               />
               <div
-                class="makeStyles-item-id"
+                class="PluginAuthorization-item-id"
               >
                 <div
                   class="MuiTypography-root-id MuiTypography-body1-id"
@@ -80119,10 +80119,10 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
                   Empty Password
                 </div>
                 <div
-                  class="makeStyles-spacer-id"
+                  class="PluginAuthorization-spacer-id"
                 />
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id makeStyles-button-id MuiButton-textPrimary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                   tabindex="0"
                   type="button"
                 >
@@ -80154,7 +80154,7 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           ... Details
         </div>
@@ -80162,12 +80162,12 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -80185,28 +80185,28 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Plugin Information and Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Plugin Name
             </div>
@@ -80214,13 +80214,13 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
               class="MuiTypography-root-id MuiTypography-body1-id"
             />
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="MuiTypography-root-id makeStyles-status-id MuiTypography-body1-id"
+              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
             >
               Status
             </div>
@@ -80228,12 +80228,12 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="active"
                   type="checkbox"
                   value="false"
@@ -80265,7 +80265,7 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Username or account Details
         </div>
@@ -80273,12 +80273,12 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -80296,28 +80296,28 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Plugin Information and Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
           >
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Plugin Name
             </div>
@@ -80327,7 +80327,7 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
               Username or account
             </div>
             <div
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h6-id"
+              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
             >
               Description
             </div>
@@ -80337,13 +80337,13 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
               Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="MuiTypography-root-id makeStyles-status-id MuiTypography-body1-id"
+              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
             >
               Status
             </div>
@@ -80351,12 +80351,12 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="active"
                   type="checkbox"
                   value="true"
@@ -80387,7 +80387,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Plugins
       </div>
@@ -80395,7 +80395,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -80413,19 +80413,19 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colActive-id"
                 scope="col"
               >
                 Active
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
                 scope="col"
               >
                 Action
@@ -80439,14 +80439,14 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -80485,10 +80485,10 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -80515,7 +80515,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -80549,24 +80549,24 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
               >
                 Avalara
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-successDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                 >
                   Yes
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
               >
                 <div>
                   <svg
@@ -80584,24 +80584,24 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
               >
                 VatLayer
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
               >
                 <div
-                  class="makeStyles-root-id undefined makeStyles-errorDot-id"
+                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                 >
                   No
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
               >
                 <div>
                   <svg
@@ -80637,7 +80637,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Plugins
       </div>
@@ -80645,7 +80645,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -80663,19 +80663,19 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colActive-id"
                 scope="col"
               >
                 Active
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
                 scope="col"
               >
                 Action
@@ -80689,14 +80689,14 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -80735,10 +80735,10 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -80765,7 +80765,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -80803,25 +80803,25 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
               class="MuiTableRow-root-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
               >
                 <div>
                   <svg
@@ -80857,7 +80857,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Plugins
       </div>
@@ -80865,7 +80865,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -80883,19 +80883,19 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colActive-id"
                 scope="col"
               >
                 Active
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
                 scope="col"
               >
                 Action
@@ -80909,14 +80909,14 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -80955,10 +80955,10 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -80985,7 +80985,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -81048,7 +81048,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create product type
         </div>
@@ -81056,34 +81056,34 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81126,34 +81126,34 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -81219,22 +81219,22 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81243,12 +81243,12 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isShippingRequired"
                     type="checkbox"
                     value="false"
@@ -81281,7 +81281,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create product type
         </div>
@@ -81289,34 +81289,34 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81364,34 +81364,34 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -81457,22 +81457,22 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81481,12 +81481,12 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isShippingRequired"
                     type="checkbox"
                     value="false"
@@ -81519,10 +81519,10 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -81532,34 +81532,34 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81603,34 +81603,34 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -81697,22 +81697,22 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81721,13 +81721,13 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isShippingRequired"
                     type="checkbox"
@@ -81761,7 +81761,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           E-books
         </div>
@@ -81769,34 +81769,34 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -81839,34 +81839,34 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -81927,22 +81927,22 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             data-tc="product-attributes"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Product Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -81958,10 +81958,10 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -81980,29 +81980,29 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Attribute name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Slug
@@ -82017,12 +82017,12 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82062,31 +82062,31 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82112,12 +82112,12 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82157,31 +82157,31 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82207,12 +82207,12 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82252,31 +82252,31 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82306,7 +82306,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <label
             class="MuiFormControlLabel-root-id"
@@ -82339,10 +82339,10 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
             >
               <div
-                class="makeStyles-label-id"
+                class="ControlledSwitch-label-id"
               >
                 <span
-                  class="makeStyles-labelText-id"
+                  class="ControlledSwitch-labelText-id"
                 >
                   Product type uses Variant Attributes
                 </span>
@@ -82356,22 +82356,22 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -82380,12 +82380,12 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isShippingRequired"
                     type="checkbox"
                     value="false"
@@ -82418,7 +82418,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           E-books
         </div>
@@ -82426,34 +82426,34 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -82501,34 +82501,34 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -82589,22 +82589,22 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             data-tc="product-attributes"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Product Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -82620,10 +82620,10 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -82642,29 +82642,29 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Attribute name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Slug
@@ -82679,12 +82679,12 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82724,31 +82724,31 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82774,12 +82774,12 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82819,31 +82819,31 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82869,12 +82869,12 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                     data-tc="id"
                     data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -82914,31 +82914,31 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       Publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -82968,7 +82968,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <label
             class="MuiFormControlLabel-root-id"
@@ -83001,10 +83001,10 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
             >
               <div
-                class="makeStyles-label-id"
+                class="ControlledSwitch-label-id"
               >
                 <span
-                  class="makeStyles-labelText-id"
+                  class="ControlledSwitch-labelText-id"
                 >
                   Product type uses Variant Attributes
                 </span>
@@ -83018,22 +83018,22 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -83042,12 +83042,12 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isShippingRequired"
                     type="checkbox"
                     value="false"
@@ -83080,10 +83080,10 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -83093,34 +83093,34 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -83164,34 +83164,34 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -83253,22 +83253,22 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             data-tc="product-attributes"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Product Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -83284,10 +83284,10 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -83306,17 +83306,17 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       scope="col"
                     />
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-dragRows-id MuiTableCell-paddingCheckbox-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -83324,13 +83324,13 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       </button>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Attribute name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Slug
@@ -83349,7 +83349,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                     data-tc="id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-columnDrag-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -83389,13 +83389,13 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                         disabled=""
                         tabindex="-1"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id makeStyles-disabled-id"
+                          class="Checkbox-box-id Checkbox-disabled-id"
                           disabled=""
                           type="checkbox"
                           value="false"
@@ -83403,27 +83403,27 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                       data-tc="name"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colSlug-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                       data-tc="slug"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -83453,7 +83453,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <label
             class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
@@ -83488,10 +83488,10 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
               class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
             >
               <div
-                class="makeStyles-label-id"
+                class="ControlledSwitch-label-id"
               >
                 <span
-                  class="makeStyles-labelText-id"
+                  class="ControlledSwitch-labelText-id"
                 >
                   Product type uses Variant Attributes
                 </span>
@@ -83505,22 +83505,22 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -83529,13 +83529,13 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isShippingRequired"
                     type="checkbox"
@@ -83569,7 +83569,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           E-books
         </div>
@@ -83577,34 +83577,34 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -83647,34 +83647,34 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Taxes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -83735,22 +83735,22 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
             data-tc="product-attributes"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Product Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -83766,10 +83766,10 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -83784,13 +83784,13 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Attribute name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                       scope="col"
                     >
                       Slug
@@ -83819,7 +83819,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <label
             class="MuiFormControlLabel-root-id"
@@ -83852,10 +83852,10 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
             >
               <div
-                class="makeStyles-label-id"
+                class="ControlledSwitch-label-id"
               >
                 <span
-                  class="makeStyles-labelText-id"
+                  class="ControlledSwitch-labelText-id"
                 >
                   Product type uses Variant Attributes
                 </span>
@@ -83869,22 +83869,22 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Shipping
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -83893,12 +83893,12 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isShippingRequired"
                     type="checkbox"
                     value="false"
@@ -83930,7 +83930,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Product Types
       </div>
@@ -83938,7 +83938,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -83958,7 +83958,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -83969,25 +83969,25 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Product Types
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -83999,14 +83999,14 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -84029,7 +84029,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -84048,31 +84048,31 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colName-id"
                 scope="col"
               >
                 Type Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colType-id"
                 scope="col"
               >
                 Type
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                 scope="col"
               >
                 Tax
@@ -84086,20 +84086,20 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -84126,7 +84126,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -84160,7 +84160,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdFR5cGU6NA=="
             >
@@ -84168,19 +84168,19 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -84194,18 +84194,18 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 Physical
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 PB100000
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdFR5cGU6NQ=="
             >
@@ -84213,19 +84213,19 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -84239,18 +84239,18 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 Digital
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 PH403682
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdFR5cGU6Mg=="
             >
@@ -84258,19 +84258,19 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -84284,18 +84284,18 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 Physical
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 PC077426
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdFR5cGU6Mw=="
             >
@@ -84303,19 +84303,19 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -84329,18 +84329,18 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 Physical
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 PB100000
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
               data-tc="id"
               data-tc-id="UHJvZHVjdFR5cGU6MQ=="
             >
@@ -84348,19 +84348,19 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     type="checkbox"
                     value="false"
                   />
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -84374,12 +84374,12 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 Physical
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 PH403970
               </td>
@@ -84403,7 +84403,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Product Types
       </div>
@@ -84411,7 +84411,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -84431,7 +84431,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -84442,25 +84442,25 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Product Types
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -84472,14 +84472,14 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -84502,7 +84502,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -84521,13 +84521,13 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                 scope="col"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -84535,19 +84535,19 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                 </button>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colName-id"
                 scope="col"
               >
                 Type Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colType-id"
                 scope="col"
               >
                 Type
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                 scope="col"
               >
                 Tax
@@ -84561,20 +84561,20 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -84601,7 +84601,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -84643,13 +84643,13 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     type="checkbox"
                     value="false"
@@ -84657,28 +84657,28 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                 </button>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -84703,7 +84703,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Product Types
       </div>
@@ -84711,7 +84711,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -84731,7 +84731,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -84742,25 +84742,25 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Product Types
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -84772,14 +84772,14 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -84802,7 +84802,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -84817,19 +84817,19 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colName-id"
                 scope="col"
               >
                 Type Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colType-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colType-id"
                 scope="col"
               >
                 Type
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colTax-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                 scope="col"
               >
                 Tax
@@ -84843,20 +84843,20 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="4"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -84883,7 +84883,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -84990,7 +84990,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="ProductVariantCreateContent-root-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
@@ -84998,7 +84998,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
             You will create variants below
           </div>
           <hr
-            class="makeStyles-root-id ProductVariantCreateSummary-hr-id"
+            class="Hr-root-id ProductVariantCreateSummary-hr-id"
           />
           <div>
             <div
@@ -85677,7 +85677,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="ProductVariantCreateContent-root-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
@@ -85685,7 +85685,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
             You will create variants below
           </div>
           <hr
-            class="makeStyles-root-id ProductVariantCreateSummary-hr-id"
+            class="Hr-root-id ProductVariantCreateSummary-hr-id"
           />
           <div>
             <div
@@ -86369,7 +86369,7 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="ProductVariantCreateContent-root-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
@@ -86377,21 +86377,21 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
             Box Size
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hr-id"
+            class="Hr-root-id ProductVariantCreateValues-hr-id"
           />
           <div
-            class="makeStyles-valueContainer-id"
+            class="ProductVariantCreateValues-valueContainer-id"
           >
             <label
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="value:100g"
                   type="checkbox"
                   value="true"
@@ -86407,12 +86407,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="value:250g"
                   type="checkbox"
                   value="false"
@@ -86428,12 +86428,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="value:500g"
                   type="checkbox"
                   value="true"
@@ -86449,12 +86449,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="value:1kg"
                   type="checkbox"
                   value="false"
@@ -86473,21 +86473,21 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
             Coffee Genre
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hr-id"
+            class="Hr-root-id ProductVariantCreateValues-hr-id"
           />
           <div
-            class="makeStyles-valueContainer-id"
+            class="ProductVariantCreateValues-valueContainer-id"
           >
             <label
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="value:arabica"
                   type="checkbox"
                   value="true"
@@ -86503,12 +86503,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="value:robusta"
                   type="checkbox"
                   value="false"
@@ -86527,21 +86527,21 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
             Collar
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hr-id"
+            class="Hr-root-id ProductVariantCreateValues-hr-id"
           />
           <div
-            class="makeStyles-valueContainer-id"
+            class="ProductVariantCreateValues-valueContainer-id"
           >
             <label
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="value:round"
                   type="checkbox"
                   value="true"
@@ -86557,12 +86557,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="value:v-neck"
                   type="checkbox"
                   value="false"
@@ -86578,12 +86578,12 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-checked-id"
+                  class="Checkbox-box-id Checkbox-checked-id"
                   name="value:polo"
                   type="checkbox"
                   value="true"
@@ -86653,7 +86653,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
           </div>
         </div>
         <div
-          class="makeStyles-root-id"
+          class="ProductVariantCreateContent-root-id"
         >
           <div
             class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
@@ -86661,7 +86661,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             Price
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hr-id"
+            class="Hr-root-id ProductVariantCreatePrices-hr-id"
           />
           <div
             class="MuiFormGroup-root-id"
@@ -86717,10 +86717,10 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
               </span>
             </label>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="MuiFormControl-root-id MuiTextField-root-id makeStyles-shortInput-id"
+              class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatePrices-shortInput-id"
             >
               <label
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
@@ -86756,7 +86756,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <label
               class="MuiFormControlLabel-root-id"
@@ -86810,13 +86810,13 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </label>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-uniform-id"
+            class="Grid-root-id Grid-uniform-id"
           >
             <div
-              class="makeStyles-label-id"
+              class="ProductVariantCreatePrices-label-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -86826,7 +86826,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </div>
             <div>
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -86880,16 +86880,16 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </div>
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hrAttribute-id"
+            class="Hr-root-id ProductVariantCreatePrices-hrAttribute-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-uniform-id"
+            class="Grid-root-id Grid-uniform-id"
           >
             <div
-              class="makeStyles-label-id"
+              class="ProductVariantCreatePrices-label-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -86937,7 +86937,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
@@ -86945,7 +86945,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             Stock
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hr-id"
+            class="Hr-root-id ProductVariantCreatePrices-hr-id"
           />
           <div
             class="MuiFormGroup-root-id"
@@ -87001,10 +87001,10 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
               </span>
             </label>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="MuiFormControl-root-id MuiTextField-root-id makeStyles-shortInput-id"
+              class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatePrices-shortInput-id"
             >
               <label
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
@@ -87039,7 +87039,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <label
               class="MuiFormControlLabel-root-id"
@@ -87093,13 +87093,13 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </label>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-uniform-id"
+            class="Grid-root-id Grid-uniform-id"
           >
             <div
-              class="makeStyles-label-id"
+              class="ProductVariantCreatePrices-label-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -87109,7 +87109,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </div>
             <div>
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -87163,16 +87163,16 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </div>
           </div>
           <hr
-            class="makeStyles-root-id makeStyles-hrAttribute-id"
+            class="Hr-root-id ProductVariantCreatePrices-hrAttribute-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
-            class="makeStyles-root-id makeStyles-uniform-id"
+            class="Grid-root-id Grid-uniform-id"
           >
             <div
-              class="makeStyles-label-id"
+              class="ProductVariantCreatePrices-label-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -87236,7 +87236,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add product
         </div>
@@ -87244,34 +87244,34 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -87313,16 +87313,16 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -87347,7 +87347,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -87368,7 +87368,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -87572,7 +87572,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -87630,40 +87630,40 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="chargeTaxes"
                     type="checkbox"
@@ -87678,13 +87678,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -87707,7 +87707,7 @@ Ctrl + K"
                       value="0"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -87735,34 +87735,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Inventory
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductStock-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id"
@@ -87838,21 +87838,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -87868,10 +87868,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -87886,31 +87886,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="product-type"
               >
                 <div
@@ -87971,16 +87971,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -88041,16 +88041,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -88115,39 +88115,39 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -88155,7 +88155,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -88204,17 +88204,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -88264,24 +88264,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -88304,7 +88304,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add product
         </div>
@@ -88312,34 +88312,34 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -88380,16 +88380,16 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -88414,7 +88414,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -88435,7 +88435,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -88639,7 +88639,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -88697,39 +88697,39 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="false"
@@ -88743,13 +88743,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -88771,7 +88771,7 @@ Ctrl + K"
                       value="0"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -88799,34 +88799,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Inventory
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductStock-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id"
@@ -88900,21 +88900,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -88930,10 +88930,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -88948,31 +88948,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="product-type"
               >
                 <div
@@ -89032,16 +89032,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -89101,16 +89101,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -89175,39 +89175,39 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -89215,7 +89215,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -89262,17 +89262,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -89320,24 +89320,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -89360,7 +89360,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add product
         </div>
@@ -89368,34 +89368,34 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -89441,16 +89441,16 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -89475,7 +89475,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -89496,7 +89496,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -89700,7 +89700,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -89758,39 +89758,39 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="false"
@@ -89804,13 +89804,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -89832,7 +89832,7 @@ Ctrl + K"
                       value="0"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -89860,34 +89860,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Inventory
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductStock-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id"
@@ -89966,21 +89966,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -89996,10 +89996,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -90014,31 +90014,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="product-type"
               >
                 <div
@@ -90103,16 +90103,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -90177,16 +90177,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -90251,39 +90251,39 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -90291,7 +90291,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -90338,17 +90338,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -90396,24 +90396,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -90436,7 +90436,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add variant
         </div>
@@ -90444,34 +90444,34 @@ exports[`Storyshots Views / Products / Create product variant add first variant
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -90486,13 +90486,13 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -90526,12 +90526,12 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       New Variant
                     </td>
@@ -90546,31 +90546,31 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -90633,34 +90633,34 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -90683,7 +90683,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -90734,7 +90734,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -90768,34 +90768,34 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -90893,7 +90893,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add variant
         </div>
@@ -90901,34 +90901,34 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -90940,16 +90940,16 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -90957,27 +90957,27 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Cordoba Oro
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -90985,12 +90985,12 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       silver
                     </td>
@@ -90999,13 +90999,13 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -91039,12 +91039,12 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       New Variant
                     </td>
@@ -91059,31 +91059,31 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -91146,34 +91146,34 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -91196,7 +91196,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -91247,7 +91247,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -91281,34 +91281,34 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -91406,7 +91406,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add variant
         </div>
@@ -91414,34 +91414,34 @@ exports[`Storyshots Views / Products / Create product variant when loading data
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -91453,16 +91453,16 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -91477,15 +91477,15 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -91495,13 +91495,13 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -91535,12 +91535,12 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       New Variant
                     </td>
@@ -91555,60 +91555,60 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -91632,7 +91632,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -91684,7 +91684,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -91718,34 +91718,34 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -91845,7 +91845,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Add variant
         </div>
@@ -91853,34 +91853,34 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -91892,16 +91892,16 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -91909,27 +91909,27 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Cordoba Oro
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -91937,12 +91937,12 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       silver
                     </td>
@@ -91951,13 +91951,13 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -91991,12 +91991,12 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       New Variant
                     </td>
@@ -92011,31 +92011,31 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -92096,7 +92096,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
@@ -92111,34 +92111,34 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -92161,7 +92161,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -92212,7 +92212,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                         value=""
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -92246,34 +92246,34 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -92376,7 +92376,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Ergonomic Plastic Bacon
         </div>
@@ -92384,34 +92384,34 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -92452,16 +92452,16 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -92486,7 +92486,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -92507,7 +92507,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -92711,7 +92711,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -92973,21 +92973,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -93003,7 +93003,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -93011,25 +93011,25 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
-                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
+                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
-                  class="makeStyles-imageUploadIcon-id"
+                  class="ProductImages-imageUploadIcon-id"
                 >
                   <input
                     accept="image/*"
                     autocomplete="off"
-                    class="makeStyles-fileField-id"
+                    class="ImageUpload-fileField-id"
                     multiple=""
                     style="display:none"
                     tabindex="-1"
@@ -93037,7 +93037,7 @@ Ctrl + K"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -93066,7 +93066,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <div
-                    class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                   >
                     Drop here to upload
                   </div>
@@ -93076,90 +93076,90 @@ Ctrl + K"
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="makeStyles-root-id"
+                  class="ProductImages-root-id"
                 >
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
@@ -93168,39 +93168,39 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="true"
@@ -93214,13 +93214,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -93242,7 +93242,7 @@ Ctrl + K"
                       value="339.39"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -93270,21 +93270,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -93301,10 +93301,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -93323,12 +93323,12 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -93364,12 +93364,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -93387,7 +93387,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -93406,12 +93406,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -93429,7 +93429,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -93446,21 +93446,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -93476,10 +93476,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -93494,31 +93494,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -93528,10 +93528,10 @@ Ctrl + K"
                 Versatile
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -93541,16 +93541,16 @@ Ctrl + K"
                 Configurable
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -93610,16 +93610,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -93684,21 +93684,21 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               >
                 <div
-                  class="makeStyles-chip-id"
+                  class="MultiAutocompleteSelectField-chip-id"
                 >
                   <div
-                    class="makeStyles-chipInner-id"
+                    class="MultiAutocompleteSelectField-chipInner-id"
                   >
                     <div
-                      class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                     >
                       Winter sale
                     </div>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                       tabindex="0"
                       type="button"
                     >
@@ -93724,34 +93724,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -93759,7 +93759,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -93807,19 +93807,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       >
                         since Aug 25, 2018
                       </span>
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -93866,19 +93866,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -93901,7 +93901,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Ergonomic Plastic Bacon
         </div>
@@ -93909,34 +93909,34 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -93977,16 +93977,16 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -94011,7 +94011,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -94032,7 +94032,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -94236,7 +94236,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -94498,21 +94498,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -94528,7 +94528,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -94536,25 +94536,25 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
-                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
+                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
-                  class="makeStyles-imageUploadIcon-id"
+                  class="ProductImages-imageUploadIcon-id"
                 >
                   <input
                     accept="image/*"
                     autocomplete="off"
-                    class="makeStyles-fileField-id"
+                    class="ImageUpload-fileField-id"
                     multiple=""
                     style="display:none"
                     tabindex="-1"
@@ -94562,7 +94562,7 @@ Ctrl + K"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -94591,7 +94591,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <div
-                    class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                   >
                     Drop here to upload
                   </div>
@@ -94601,90 +94601,90 @@ Ctrl + K"
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="makeStyles-root-id"
+                  class="ProductImages-root-id"
                 >
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
@@ -94693,46 +94693,46 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
             >
               <div
-                class="makeStyles-expansionBar-id"
+                class="ProductAttributes-expansionBar-id"
               >
                 <div
-                  class="makeStyles-expansionBarLabelContainer-id"
+                  class="ProductAttributes-expansionBarLabelContainer-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-expansionBarLabel-id MuiTypography-caption-id"
+                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                   >
                     2 Attributes
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-expansionBarButton-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                   data-tc="product-attributes-expand"
                   tabindex="0"
                   type="button"
@@ -94742,7 +94742,7 @@ Ctrl + K"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-expansionBarButtonIcon-id makeStyles-rotate-id"
+                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -94755,13 +94755,13 @@ Ctrl + K"
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -94774,7 +94774,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -94835,13 +94835,13 @@ Ctrl + K"
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -94854,7 +94854,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="MultiAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -94913,21 +94913,21 @@ Ctrl + K"
                     </div>
                   </div>
                   <div
-                    class="makeStyles-chipContainer-id"
+                    class="MultiAutocompleteSelectField-chipContainer-id"
                   >
                     <div
-                      class="makeStyles-chip-id"
+                      class="MultiAutocompleteSelectField-chip-id"
                     >
                       <div
-                        class="makeStyles-chipInner-id"
+                        class="MultiAutocompleteSelectField-chipInner-id"
                       >
                         <div
-                          class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                         >
                           Auto Loan Account
                         </div>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                           tabindex="0"
                           type="button"
                         >
@@ -94955,36 +94955,36 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="true"
@@ -94998,13 +94998,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -95026,7 +95026,7 @@ Ctrl + K"
                       value="339.39"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -95054,21 +95054,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -95085,10 +95085,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -95107,12 +95107,12 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -95148,12 +95148,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -95171,7 +95171,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -95190,12 +95190,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -95213,7 +95213,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -95230,21 +95230,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -95260,10 +95260,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -95278,31 +95278,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -95312,10 +95312,10 @@ Ctrl + K"
                 Versatile
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -95325,16 +95325,16 @@ Ctrl + K"
                 Configurable
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -95394,16 +95394,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -95468,21 +95468,21 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               >
                 <div
-                  class="makeStyles-chip-id"
+                  class="MultiAutocompleteSelectField-chip-id"
                 >
                   <div
-                    class="makeStyles-chipInner-id"
+                    class="MultiAutocompleteSelectField-chipInner-id"
                   >
                     <div
-                      class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                     >
                       Winter sale
                     </div>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                       tabindex="0"
                       type="button"
                     >
@@ -95508,34 +95508,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -95543,7 +95543,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -95591,19 +95591,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       >
                         since Aug 25, 2018
                       </span>
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -95650,19 +95650,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -95685,7 +95685,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Ergonomic Plastic Bacon
         </div>
@@ -95693,34 +95693,34 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -95761,16 +95761,16 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -95795,7 +95795,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -95816,7 +95816,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -96020,7 +96020,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -96282,21 +96282,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -96312,7 +96312,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -96320,25 +96320,25 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
-                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
+                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
-                  class="makeStyles-imageUploadIcon-id"
+                  class="ProductImages-imageUploadIcon-id"
                 >
                   <input
                     accept="image/*"
                     autocomplete="off"
-                    class="makeStyles-fileField-id"
+                    class="ImageUpload-fileField-id"
                     multiple=""
                     style="display:none"
                     tabindex="-1"
@@ -96346,7 +96346,7 @@ Ctrl + K"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -96375,7 +96375,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <div
-                    class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                   >
                     Drop here to upload
                   </div>
@@ -96385,90 +96385,90 @@ Ctrl + K"
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="makeStyles-root-id"
+                  class="ProductImages-root-id"
                 >
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
@@ -96477,46 +96477,46 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
             >
               <div
-                class="makeStyles-expansionBar-id"
+                class="ProductAttributes-expansionBar-id"
               >
                 <div
-                  class="makeStyles-expansionBarLabelContainer-id"
+                  class="ProductAttributes-expansionBarLabelContainer-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-expansionBarLabel-id MuiTypography-caption-id"
+                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                   >
                     2 Attributes
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-expansionBarButton-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                   data-tc="product-attributes-expand"
                   tabindex="0"
                   type="button"
@@ -96526,7 +96526,7 @@ Ctrl + K"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-expansionBarButtonIcon-id makeStyles-rotate-id"
+                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -96539,13 +96539,13 @@ Ctrl + K"
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -96558,7 +96558,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -96619,13 +96619,13 @@ Ctrl + K"
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -96638,7 +96638,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="MultiAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -96697,21 +96697,21 @@ Ctrl + K"
                     </div>
                   </div>
                   <div
-                    class="makeStyles-chipContainer-id"
+                    class="MultiAutocompleteSelectField-chipContainer-id"
                   >
                     <div
-                      class="makeStyles-chip-id"
+                      class="MultiAutocompleteSelectField-chip-id"
                     >
                       <div
-                        class="makeStyles-chipInner-id"
+                        class="MultiAutocompleteSelectField-chipInner-id"
                       >
                         <div
-                          class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                         >
                           Auto Loan Account
                         </div>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                           tabindex="0"
                           type="button"
                         >
@@ -96739,36 +96739,36 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="true"
@@ -96782,13 +96782,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -96810,7 +96810,7 @@ Ctrl + K"
                       value="339.39"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -96838,21 +96838,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -96869,10 +96869,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -96891,12 +96891,12 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -96932,12 +96932,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -96955,7 +96955,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -96974,12 +96974,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -96997,7 +96997,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -97014,21 +97014,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -97044,10 +97044,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -97062,31 +97062,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -97096,10 +97096,10 @@ Ctrl + K"
                 Versatile
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -97109,16 +97109,16 @@ Ctrl + K"
                 Configurable
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -97178,16 +97178,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -97252,21 +97252,21 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               >
                 <div
-                  class="makeStyles-chip-id"
+                  class="MultiAutocompleteSelectField-chip-id"
                 >
                   <div
-                    class="makeStyles-chipInner-id"
+                    class="MultiAutocompleteSelectField-chipInner-id"
                   >
                     <div
-                      class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                     >
                       Winter sale
                     </div>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                       tabindex="0"
                       type="button"
                     >
@@ -97292,34 +97292,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -97327,7 +97327,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -97375,19 +97375,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       >
                         since Aug 25, 2018
                       </span>
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -97434,19 +97434,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -97469,10 +97469,10 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -97482,34 +97482,34 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -97551,16 +97551,16 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -97585,7 +97585,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -97606,7 +97606,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -97810,7 +97810,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -97868,21 +97868,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -97898,7 +97898,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -97906,25 +97906,25 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="makeStyles-root-id"
+                  class="ProductImages-root-id"
                 >
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ProductImages-imageContainer-id"
                   >
                     <img
-                      class="makeStyles-image-id"
+                      class="ProductImages-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
@@ -97933,40 +97933,40 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="chargeTaxes"
                     type="checkbox"
@@ -97981,13 +97981,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -98030,34 +98030,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Inventory
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductStock-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id"
@@ -98135,21 +98135,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -98165,10 +98165,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -98183,31 +98183,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -98217,10 +98217,10 @@ Ctrl + K"
                 ...
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -98230,16 +98230,16 @@ Ctrl + K"
                 ...
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -98300,16 +98300,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -98374,39 +98374,39 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -98414,7 +98414,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -98463,17 +98463,17 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id MuiFormControlLabel-disabled-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
                       aria-disabled="true"
@@ -98523,24 +98523,24 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id makeStyles-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -98563,7 +98563,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Ergonomic Plastic Bacon
         </div>
@@ -98571,34 +98571,34 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -98639,16 +98639,16 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -98673,7 +98673,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -98694,7 +98694,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -98898,7 +98898,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -99160,21 +99160,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -99190,7 +99190,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -99198,16 +99198,16 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
-                class="makeStyles-photosIconContainer-id"
+                class="ImageUpload-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
@@ -99216,7 +99216,7 @@ Ctrl + K"
                   <input
                     accept="image/*"
                     autocomplete="off"
-                    class="makeStyles-fileField-id"
+                    class="ImageUpload-fileField-id"
                     multiple=""
                     style="display:none"
                     tabindex="-1"
@@ -99224,7 +99224,7 @@ Ctrl + K"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -99253,7 +99253,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <div
-                    class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                   >
                     Drop here to upload
                   </div>
@@ -99262,46 +99262,46 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
             >
               <div
-                class="makeStyles-expansionBar-id"
+                class="ProductAttributes-expansionBar-id"
               >
                 <div
-                  class="makeStyles-expansionBarLabelContainer-id"
+                  class="ProductAttributes-expansionBarLabelContainer-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-expansionBarLabel-id MuiTypography-caption-id"
+                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                   >
                     2 Attributes
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-expansionBarButton-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                   data-tc="product-attributes-expand"
                   tabindex="0"
                   type="button"
@@ -99311,7 +99311,7 @@ Ctrl + K"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-expansionBarButtonIcon-id makeStyles-rotate-id"
+                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -99324,13 +99324,13 @@ Ctrl + K"
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -99343,7 +99343,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -99404,13 +99404,13 @@ Ctrl + K"
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -99423,7 +99423,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="MultiAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -99482,21 +99482,21 @@ Ctrl + K"
                     </div>
                   </div>
                   <div
-                    class="makeStyles-chipContainer-id"
+                    class="MultiAutocompleteSelectField-chipContainer-id"
                   >
                     <div
-                      class="makeStyles-chip-id"
+                      class="MultiAutocompleteSelectField-chip-id"
                     >
                       <div
-                        class="makeStyles-chipInner-id"
+                        class="MultiAutocompleteSelectField-chipInner-id"
                       >
                         <div
-                          class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                         >
                           Auto Loan Account
                         </div>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                           tabindex="0"
                           type="button"
                         >
@@ -99524,36 +99524,36 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="true"
@@ -99567,13 +99567,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -99595,7 +99595,7 @@ Ctrl + K"
                       value="339.39"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -99623,21 +99623,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -99654,10 +99654,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -99676,12 +99676,12 @@ Ctrl + K"
                       scope="col"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -99717,12 +99717,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -99740,7 +99740,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -99759,12 +99759,12 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id makeStyles-root-id"
+                        class="MuiButtonBase-root-id Checkbox-root-id"
                         tabindex="0"
                         type="button"
                       >
                         <input
-                          class="makeStyles-box-id"
+                          class="Checkbox-box-id"
                           type="checkbox"
                           value="false"
                         />
@@ -99782,7 +99782,7 @@ Ctrl + K"
                       data-tc-is-available="true"
                     >
                       <div
-                        class="makeStyles-root-id undefined makeStyles-successDot-id"
+                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                       >
                         Available
                       </div>
@@ -99799,21 +99799,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -99829,10 +99829,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -99847,31 +99847,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -99881,10 +99881,10 @@ Ctrl + K"
                 Versatile
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -99894,16 +99894,16 @@ Ctrl + K"
                 Configurable
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -99963,16 +99963,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -100037,21 +100037,21 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               >
                 <div
-                  class="makeStyles-chip-id"
+                  class="MultiAutocompleteSelectField-chip-id"
                 >
                   <div
-                    class="makeStyles-chipInner-id"
+                    class="MultiAutocompleteSelectField-chipInner-id"
                   >
                     <div
-                      class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                     >
                       Winter sale
                     </div>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                       tabindex="0"
                       type="button"
                     >
@@ -100077,34 +100077,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -100112,7 +100112,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -100160,19 +100160,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       >
                         since Aug 25, 2018
                       </span>
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -100219,19 +100219,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -100254,7 +100254,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Ergonomic Plastic Bacon
         </div>
@@ -100262,34 +100262,34 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -100330,16 +100330,16 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-root-id makeStyles-scroll-id"
+                class="RichTextEditor-root-id RichTextEditor-scroll-id"
               >
                 <div
-                  class="makeStyles-input-id"
+                  class="RichTextEditor-input-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
+                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                   >
                     Description
                   </div>
@@ -100364,7 +100364,7 @@ Ctrl + B"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -100385,7 +100385,7 @@ Ctrl + I"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-smallIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -100589,7 +100589,7 @@ Ctrl + K"
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root-id makeStyles-linkIcon-id"
+                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                             focusable="false"
                             role="presentation"
                             viewBox="0 0 24 24"
@@ -100851,21 +100851,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -100881,7 +100881,7 @@ Ctrl + K"
                 </button>
                 <input
                   accept="image/*"
-                  class="makeStyles-fileField-id"
+                  class="ProductImages-fileField-id"
                   id="fileUpload"
                   multiple=""
                   type="file"
@@ -100889,25 +100889,25 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="makeStyles-imageGridContainer-id"
+              class="ProductImages-imageGridContainer-id"
             >
               <div
-                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
+                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
-                  class="makeStyles-imageUploadIcon-id"
+                  class="ProductImages-imageUploadIcon-id"
                 >
                   <input
                     accept="image/*"
                     autocomplete="off"
-                    class="makeStyles-fileField-id"
+                    class="ImageUpload-fileField-id"
                     multiple=""
                     style="display:none"
                     tabindex="-1"
@@ -100915,7 +100915,7 @@ Ctrl + K"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root-id makeStyles-photosIcon-id"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                     focusable="false"
                     role="presentation"
                     viewBox="0 0 24 24"
@@ -100944,7 +100944,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <div
-                    class="MuiTypography-root-id makeStyles-uploadText-id MuiTypography-body1-id"
+                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                   >
                     Drop here to upload
                   </div>
@@ -100954,90 +100954,90 @@ Ctrl + K"
                 class="MuiCardContent-root-id"
               >
                 <div
-                  class="makeStyles-root-id"
+                  class="ProductImages-root-id"
                 >
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
                   <div
-                    class="makeStyles-imageContainer-id"
+                    class="ImageTile-imageContainer-id"
                     data-tc="product-image"
                   >
                     <div
-                      class="makeStyles-imageOverlay-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="makeStyles-imageOverlayToolbar-id"
+                        class="ImageTile-imageOverlayToolbar-id"
                       />
                     </div>
                     <img
                       alt="Id sit dolores adipisci"
-                      class="makeStyles-image-id"
+                      class="ImageTile-image-id"
                       src="placeholder255x255.png"
                     />
                   </div>
@@ -101046,46 +101046,46 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Attributes
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-cardContent-id"
+              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
             >
               <div
-                class="makeStyles-expansionBar-id"
+                class="ProductAttributes-expansionBar-id"
               >
                 <div
-                  class="makeStyles-expansionBarLabelContainer-id"
+                  class="ProductAttributes-expansionBarLabelContainer-id"
                 >
                   <div
-                    class="MuiTypography-root-id makeStyles-expansionBarLabel-id MuiTypography-caption-id"
+                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                   >
                     2 Attributes
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-expansionBarButton-id"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                   data-tc="product-attributes-expand"
                   tabindex="0"
                   type="button"
@@ -101095,7 +101095,7 @@ Ctrl + K"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-expansionBarButtonIcon-id makeStyles-rotate-id"
+                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -101108,13 +101108,13 @@ Ctrl + K"
                 </button>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -101127,7 +101127,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="SingleAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -101188,13 +101188,13 @@ Ctrl + K"
                 </div>
               </div>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-attributeSection-id makeStyles-root-id makeStyles-uniform-id"
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-attributeSectionLabel-id"
+                  class="ProductAttributes-attributeSectionLabel-id"
                   data-tc="product-attribute-label"
                 >
                   <div
@@ -101207,7 +101207,7 @@ Ctrl + K"
                   data-tc="product-attribute-value"
                 >
                   <div
-                    class="makeStyles-container-id"
+                    class="MultiAutocompleteSelectField-container-id"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -101266,21 +101266,21 @@ Ctrl + K"
                     </div>
                   </div>
                   <div
-                    class="makeStyles-chipContainer-id"
+                    class="MultiAutocompleteSelectField-chipContainer-id"
                   >
                     <div
-                      class="makeStyles-chip-id"
+                      class="MultiAutocompleteSelectField-chip-id"
                     >
                       <div
-                        class="makeStyles-chipInner-id"
+                        class="MultiAutocompleteSelectField-chipInner-id"
                       >
                         <div
-                          class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                         >
                           Auto Loan Account
                         </div>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                           tabindex="0"
                           type="button"
                         >
@@ -101308,36 +101308,36 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="chargeTaxes"
                     type="checkbox"
                     value="true"
@@ -101351,13 +101351,13 @@ Ctrl + K"
               </label>
             </div>
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductPricing-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -101379,7 +101379,7 @@ Ctrl + K"
                       value="339.39"
                     />
                     <div
-                      class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -101407,34 +101407,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Inventory
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductStock-root-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id"
@@ -101515,21 +101515,21 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Search Engine Preview
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -101545,10 +101545,10 @@ Ctrl + K"
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -101563,31 +101563,31 @@ Ctrl + K"
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Organize Product
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -101597,10 +101597,10 @@ Ctrl + K"
                 Versatile
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="CardSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-label-id MuiTypography-caption-id"
+                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
               >
                 Product Type
               </div>
@@ -101610,16 +101610,16 @@ Ctrl + K"
                 Simple
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
                 data-tc="category"
               >
                 <div
@@ -101679,16 +101679,16 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="makeStyles-container-id"
+                class="MultiAutocompleteSelectField-container-id"
                 data-tc="collections"
               >
                 <div
@@ -101753,21 +101753,21 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="makeStyles-chipContainer-id"
+                class="MultiAutocompleteSelectField-chipContainer-id"
               >
                 <div
-                  class="makeStyles-chip-id"
+                  class="MultiAutocompleteSelectField-chip-id"
                 >
                   <div
-                    class="makeStyles-chipInner-id"
+                    class="MultiAutocompleteSelectField-chipInner-id"
                   >
                     <div
-                      class="MuiTypography-root-id makeStyles-chipLabel-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                     >
                       Winter sale
                     </div>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-chipClose-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                       tabindex="0"
                       type="button"
                     >
@@ -101793,34 +101793,34 @@ Ctrl + K"
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Visibility
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
                   aria-label="isPublished"
@@ -101828,7 +101828,7 @@ Ctrl + K"
                   role="radiogroup"
                 >
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -101876,19 +101876,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Visible
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       >
                         since Aug 25, 2018
                       </span>
                     </span>
                   </label>
                   <label
-                    class="MuiFormControlLabel-root-id makeStyles-radioLabel-id"
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
                       aria-disabled="false"
@@ -101935,19 +101935,19 @@ Ctrl + K"
                       class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
                       <p
-                        class="makeStyles-label-id"
+                        class="VisibilityCard-label-id"
                       >
                         Hidden
                       </p>
                       <span
-                        class="makeStyles-secondLabel-id"
+                        class="VisibilityCard-secondLabel-id"
                       />
                     </span>
                   </label>
                 </div>
               </div>
               <div
-                class="makeStyles-children-id"
+                class="VisibilityCard-children-id"
               />
             </div>
           </div>
@@ -101970,7 +101970,7 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Edit Photo
         </div>
@@ -101978,102 +101978,102 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImageNavigation-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 All Photos
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductImageNavigation-root-id"
               >
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductImageNavigation-image-id"
                     src="placeholder1080x1080.png"
                   />
                 </div>
@@ -102084,22 +102084,22 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Photo Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -102160,31 +102160,31 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Photo View
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-imageContainer-id"
+                class="ProductImagePage-imageContainer-id"
               >
                 <img
-                  class="makeStyles-image-id"
+                  class="ProductImagePage-image-id"
                   src="placeholder1080x1080.png"
                 />
               </div>
@@ -102209,7 +102209,7 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Edit Photo
         </div>
@@ -102217,40 +102217,40 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-card-id MuiPaper-rounded-id"
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImageNavigation-card-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 All Photos
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
@@ -102260,22 +102260,22 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Photo Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -102335,28 +102335,28 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Photo View
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <span
-                class="makeStyles-skeleton-id"
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
@@ -102380,7 +102380,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Products
       </div>
@@ -102388,10 +102388,10 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div
-            class="makeStyles-columnPicker-id"
+            class="ProductListPage-columnPicker-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
@@ -102435,7 +102435,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -102446,25 +102446,25 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Products
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -102477,18 +102477,18 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -102500,14 +102500,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -102530,30 +102530,30 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
-        class="makeStyles-tableContainer-id"
+        class="ProductList-tableContainer-id"
       >
         <div
           class="ResponsiveTable-root-id"
         >
           <table
-            class="MuiTable-root-id makeStyles-table-id"
+            class="MuiTable-root-id ProductList-table-id"
           >
             <colgroup>
               <col />
               <col
-                class="makeStyles-colName-id"
+                class="ProductList-colName-id"
               />
               <col
-                class="makeStyles-colType-id"
+                class="ProductList-colType-id"
               />
               <col
-                class="makeStyles-colPublished-id"
+                class="ProductList-colPublished-id"
               />
               <col
-                class="makeStyles-colPrice-id"
+                class="ProductList-colPrice-id"
               />
             </colgroup>
             <thead
@@ -102567,36 +102567,36 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   scope="col"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       <span
-                        class="makeStyles-colNameHeader-id"
+                        class="ProductList-colNameHeader-id"
                       >
                         Name
                       </span>
                     </div>
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -102616,42 +102616,42 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Type
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Published
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Price
                     </div>
@@ -102666,14 +102666,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="5"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     >
                       <div>
                         <span
@@ -102712,10 +102712,10 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       </div>
                     </div>
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-back"
                         disabled=""
                         tabindex="-1"
@@ -102742,7 +102742,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -102776,7 +102776,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2MQ=="
               >
@@ -102784,26 +102784,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -102811,37 +102811,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Nebula Night Sky Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2NA=="
               >
@@ -102849,26 +102849,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -102876,37 +102876,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Light Speed Yellow Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2NQ=="
               >
@@ -102914,26 +102914,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -102941,37 +102941,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Hyperspace Turquoise Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3NQ=="
               >
@@ -102979,26 +102979,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103006,37 +103006,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Pineapple Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Ng=="
               >
@@ -103044,26 +103044,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103071,37 +103071,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Coconut Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Mg=="
               >
@@ -103109,26 +103109,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103136,37 +103136,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Apple Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3MQ=="
               >
@@ -103174,26 +103174,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103201,37 +103201,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Orange Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3NA=="
               >
@@ -103239,26 +103239,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103266,37 +103266,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Banana Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3OQ=="
               >
@@ -103304,26 +103304,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103331,37 +103331,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Bean Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Mw=="
               >
@@ -103369,26 +103369,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103396,37 +103396,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Carrot Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3OA=="
               >
@@ -103434,26 +103434,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103461,37 +103461,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Green Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo4OQ=="
               >
@@ -103499,26 +103499,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103526,37 +103526,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Code Division T-shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDc="
               >
@@ -103564,26 +103564,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103591,37 +103591,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDg="
               >
@@ -103629,26 +103629,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103656,37 +103656,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDk="
               >
@@ -103694,26 +103694,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103721,37 +103721,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTA="
               >
@@ -103759,26 +103759,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103786,37 +103786,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTU="
               >
@@ -103824,26 +103824,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103851,37 +103851,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Black Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTY="
               >
@@ -103889,26 +103889,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103916,37 +103916,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Blue Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTc="
               >
@@ -103954,26 +103954,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -103981,37 +103981,37 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Mustard Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo4NQ=="
               >
@@ -104019,26 +104019,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -104046,31 +104046,31 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Colored Parrot Cushion
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Cushion
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $20.00
                 </td>
@@ -104095,7 +104095,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Products
       </div>
@@ -104103,10 +104103,10 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div
-            class="makeStyles-columnPicker-id"
+            class="ProductListPage-columnPicker-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
@@ -104150,7 +104150,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -104161,25 +104161,25 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 All Products
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -104192,18 +104192,18 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -104215,14 +104215,14 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -104245,30 +104245,30 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
-        class="makeStyles-tableContainer-id"
+        class="ProductList-tableContainer-id"
       >
         <div
           class="ResponsiveTable-root-id"
         >
           <table
-            class="MuiTable-root-id makeStyles-table-id"
+            class="MuiTable-root-id ProductList-table-id"
           >
             <colgroup>
               <col />
               <col
-                class="makeStyles-colName-id"
+                class="ProductList-colName-id"
               />
               <col
-                class="makeStyles-colType-id"
+                class="ProductList-colType-id"
               />
               <col
-                class="makeStyles-colPublished-id"
+                class="ProductList-colPublished-id"
               />
               <col
-                class="makeStyles-colPrice-id"
+                class="ProductList-colPrice-id"
               />
             </colgroup>
             <thead
@@ -104282,13 +104282,13 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   scope="col"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       type="checkbox"
                       value="false"
@@ -104296,24 +104296,24 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   </button>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       <span
-                        class="makeStyles-colNameHeader-id"
+                        class="ProductList-colNameHeader-id"
                       >
                         Name
                       </span>
                     </div>
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -104333,42 +104333,42 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Type
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Published
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Price
                     </div>
@@ -104383,14 +104383,14 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="5"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     >
                       <div>
                         <span
@@ -104429,10 +104429,10 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                       </div>
                     </div>
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-back"
                         disabled=""
                         tabindex="-1"
@@ -104459,7 +104459,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-next"
                         disabled=""
                         tabindex="-1"
@@ -104494,20 +104494,20 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id"
+                class="MuiTableRow-root-id ProductList-link-id"
                 data-tc="id"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       type="checkbox"
                       value="false"
@@ -104515,14 +104515,14 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -104537,10 +104537,10 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                       </svg>
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -104548,30 +104548,30 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -104597,7 +104597,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Products
       </div>
@@ -104605,10 +104605,10 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div
-            class="makeStyles-columnPicker-id"
+            class="ProductListPage-columnPicker-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
@@ -104652,7 +104652,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -104663,25 +104663,25 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Products
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -104694,18 +104694,18 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -104717,14 +104717,14 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -104747,30 +104747,30 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
-        class="makeStyles-tableContainer-id"
+        class="ProductList-tableContainer-id"
       >
         <div
           class="ResponsiveTable-root-id"
         >
           <table
-            class="MuiTable-root-id makeStyles-table-id"
+            class="MuiTable-root-id ProductList-table-id"
           >
             <colgroup>
               <col />
               <col
-                class="makeStyles-colName-id"
+                class="ProductList-colName-id"
               />
               <col
-                class="makeStyles-colType-id"
+                class="ProductList-colType-id"
               />
               <col
-                class="makeStyles-colPublished-id"
+                class="ProductList-colPublished-id"
               />
               <col
-                class="makeStyles-colPrice-id"
+                class="ProductList-colPrice-id"
               />
             </colgroup>
             <thead
@@ -104780,24 +104780,24 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-head-id"
               >
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       <span
-                        class="makeStyles-colNameHeader-id"
+                        class="ProductList-colNameHeader-id"
                       >
                         Name
                       </span>
                     </div>
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -104817,42 +104817,42 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Type
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Published
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Price
                     </div>
@@ -104867,14 +104867,14 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="5"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     >
                       <div>
                         <span
@@ -104913,10 +104913,10 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                       </div>
                     </div>
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-back"
                         disabled=""
                         tabindex="-1"
@@ -104943,7 +104943,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -105006,7 +105006,7 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Products
       </div>
@@ -105014,10 +105014,10 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <div
-            class="makeStyles-columnPicker-id"
+            class="ProductListPage-columnPicker-id"
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
@@ -105061,7 +105061,7 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -105072,25 +105072,25 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Products
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -105103,18 +105103,18 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
       >
         <div>
           <button
-            class="MuiButtonBase-root-id makeStyles-filterButton-id makeStyles-addFilterButton-id"
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
             tabindex="0"
             type="button"
           >
             <div
-              class="MuiTypography-root-id makeStyles-addFilterText-id MuiTypography-body1-id"
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
               Add Filter
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id makeStyles-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
+              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -105126,14 +105126,14 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -105554,27 +105554,27 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
         </div>
       </div>
       <div
-        class="makeStyles-tableContainer-id"
+        class="ProductList-tableContainer-id"
       >
         <div
           class="ResponsiveTable-root-id"
         >
           <table
-            class="MuiTable-root-id makeStyles-table-id"
+            class="MuiTable-root-id ProductList-table-id"
           >
             <colgroup>
               <col />
               <col
-                class="makeStyles-colName-id"
+                class="ProductList-colName-id"
               />
               <col
-                class="makeStyles-colType-id"
+                class="ProductList-colType-id"
               />
               <col
-                class="makeStyles-colPublished-id"
+                class="ProductList-colPublished-id"
               />
               <col
-                class="makeStyles-colPrice-id"
+                class="ProductList-colPrice-id"
               />
             </colgroup>
             <thead
@@ -105588,36 +105588,36 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   scope="col"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerActive-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       <span
-                        class="makeStyles-colNameHeader-id"
+                        class="ProductList-colNameHeader-id"
                       >
                         Name
                       </span>
                     </div>
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id makeStyles-arrow-id makeStyles-arrowUp-id"
+                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
@@ -105637,42 +105637,42 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Type
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id"
+                    class="TableCellHeader-labelContainer-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Published
                     </div>
                   </div>
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-root-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                   scope="col"
                 >
                   <div
-                    class="makeStyles-labelContainer-id makeStyles-labelContainerRight-id"
+                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                   >
                     <div
-                      class="makeStyles-label-id"
+                      class="TableCellHeader-label-id"
                     >
                       Price
                     </div>
@@ -105687,14 +105687,14 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-footer-id"
               >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                   colspan="5"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                   >
                     <div
-                      class="makeStyles-spacer-id"
+                      class="TablePagination-spacer-id"
                     >
                       <div>
                         <span
@@ -105733,10 +105733,10 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       </div>
                     </div>
                     <div
-                      class="makeStyles-root-id"
+                      class="TablePaginationActions-root-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-tc="button-pagination-back"
                         disabled=""
                         tabindex="-1"
@@ -105763,7 +105763,7 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                         </span>
                       </button>
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                         data-tc="button-pagination-next"
                         tabindex="0"
                         type="button"
@@ -105797,7 +105797,7 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2MQ=="
               >
@@ -105805,26 +105805,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -105832,37 +105832,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Nebula Night Sky Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2NA=="
               >
@@ -105870,26 +105870,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -105897,37 +105897,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Light Speed Yellow Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo2NQ=="
               >
@@ -105935,26 +105935,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -105962,37 +105962,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Hyperspace Turquoise Paint
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Paint
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $15.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3NQ=="
               >
@@ -106000,26 +106000,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106027,37 +106027,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Pineapple Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Ng=="
               >
@@ -106065,26 +106065,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106092,37 +106092,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Coconut Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Mg=="
               >
@@ -106130,26 +106130,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106157,37 +106157,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Apple Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3MQ=="
               >
@@ -106195,26 +106195,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106222,37 +106222,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Orange Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3NA=="
               >
@@ -106260,26 +106260,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106287,37 +106287,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Banana Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3OQ=="
               >
@@ -106325,26 +106325,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106352,37 +106352,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Bean Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3Mw=="
               >
@@ -106390,26 +106390,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106417,37 +106417,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Carrot Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo3OA=="
               >
@@ -106455,26 +106455,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106482,37 +106482,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Green Juice
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Juice
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $3.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo4OQ=="
               >
@@ -106520,26 +106520,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106547,37 +106547,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Code Division T-shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDc="
               >
@@ -106585,26 +106585,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106612,37 +106612,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDg="
               >
@@ -106650,26 +106650,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106677,37 +106677,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMDk="
               >
@@ -106715,26 +106715,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106742,37 +106742,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTA="
               >
@@ -106780,26 +106780,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106807,37 +106807,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Polo Shirt
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTU="
               >
@@ -106845,26 +106845,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106872,37 +106872,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Black Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTY="
               >
@@ -106910,26 +106910,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -106937,37 +106937,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Blue Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDoxMTc="
               >
@@ -106975,26 +106975,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -107002,37 +107002,37 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Mustard Hoodie
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $30.00
                 </td>
               </tr>
               <tr
-                class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                 data-tc="id"
                 data-tc-id="UHJvZHVjdDo4NQ=="
               >
@@ -107040,26 +107040,26 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       type="checkbox"
                       value="false"
                     />
                   </button>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-colName-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
                   data-tc="name"
                 >
                   <div
-                    class="makeStyles-content-id"
+                    class="TableCellAvatar-content-id"
                   >
                     <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                     >
                       <img
                         class="MuiAvatar-img-id"
@@ -107067,31 +107067,31 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
                       />
                     </div>
                     <div
-                      class="makeStyles-children-id"
+                      class="TableCellAvatar-children-id"
                     >
                       Colored Parrot Cushion
                     </div>
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colType-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
                   Cushion
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPublished-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                   data-tc="isPublished"
                   data-tc-is-published="true"
                 >
                   <div
-                    class="makeStyles-root-id undefined makeStyles-successDot-id"
+                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                   >
                     Published
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colPrice-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
                   $20.00
                 </td>
@@ -107116,7 +107116,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Extended Hard
       </div>
@@ -107124,35 +107124,35 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <form>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -107164,16 +107164,16 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107181,27 +107181,27 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Extended Hard
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107209,27 +107209,27 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Extended Soft
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107237,27 +107237,27 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Normal Hard
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107265,12 +107265,12 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Normal Soft
                     </td>
@@ -107305,31 +107305,31 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -107389,7 +107389,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   </div>
                 </div>
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -107450,7 +107450,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
@@ -107465,21 +107465,21 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -107495,46 +107495,46 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductVariantImages-root-id"
               >
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
@@ -107542,34 +107542,34 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -107592,7 +107592,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                         value="100"
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -107643,7 +107643,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                         value="12"
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -107677,34 +107677,34 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -107811,7 +107811,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Extended Hard
       </div>
@@ -107819,35 +107819,35 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <form>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -107859,16 +107859,16 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id makeStyles-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107876,27 +107876,27 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Extended Hard
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107904,27 +107904,27 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Extended Soft
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107932,27 +107932,27 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Normal Hard
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                         >
                           <img
                             class="MuiAvatar-img-id"
@@ -107960,12 +107960,12 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                           />
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       Normal Soft
                     </td>
@@ -108000,31 +108000,31 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               >
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -108084,7 +108084,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   </div>
                 </div>
                 <div
-                  class="makeStyles-container-id"
+                  class="SingleAutocompleteSelectField-container-id"
                   data-tc="variant-attribute-input"
                 >
                   <div
@@ -108147,21 +108147,21 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -108177,46 +108177,46 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductVariantImages-root-id"
               >
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
                 <div
-                  class="makeStyles-imageContainer-id"
+                  class="ProductVariantImages-imageContainer-id"
                 >
                   <img
-                    class="makeStyles-image-id"
+                    class="ProductVariantImages-image-id"
                     src="placeholder60x60.png"
                   />
                 </div>
@@ -108224,34 +108224,34 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -108274,7 +108274,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         value="100"
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -108325,7 +108325,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         value="12"
                       />
                       <div
-                        class="MuiInputAdornment-root-id makeStyles-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
@@ -108359,34 +108359,34 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -108488,10 +108488,10 @@ exports[`Storyshots Views / Products / Product variant details when loading data
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
@@ -108501,35 +108501,35 @@ exports[`Storyshots Views / Products / Product variant details when loading data
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <form>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Variants
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -108541,16 +108541,16 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-link-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                     >
                       <div
-                        class="makeStyles-content-id"
+                        class="TableCellAvatar-content-id"
                       >
                         <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id makeStyles-avatar-id MuiAvatar-colorDefault-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
                         >
                           <svg
                             aria-hidden="true"
@@ -108565,15 +108565,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                           </svg>
                         </div>
                         <div
-                          class="makeStyles-children-id"
+                          class="TableCellAvatar-children-id"
                         />
                       </div>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -108609,47 +108609,47 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id makeStyles-uniform-id"
+                class="Grid-root-id Grid-uniform-id"
               />
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Images
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -108666,19 +108666,19 @@ exports[`Storyshots Views / Products / Product variant details when loading data
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-root-id"
+                class="ProductVariantImages-root-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -108686,34 +108686,34 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Pricing
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantPrice-grid-id"
               >
                 <div>
                   <div
@@ -108807,34 +108807,34 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Stock
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-grid-id"
+                class="ProductVariantStock-grid-id"
               >
                 <div>
                   <div
@@ -108934,7 +108934,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Account
         </div>
@@ -108942,34 +108942,34 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -109016,22 +109016,22 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Permissions
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -109048,12 +109048,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasFullAccess"
                     type="checkbox"
                     value="false"
@@ -109078,12 +109078,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="IMPERSONATE_USERS"
                     type="checkbox"
                     value="false"
@@ -109101,12 +109101,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_DISCOUNTS"
                     type="checkbox"
                     value="false"
@@ -109124,12 +109124,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_MENUS"
                     type="checkbox"
                     value="false"
@@ -109147,12 +109147,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_ORDERS"
                     type="checkbox"
                     value="false"
@@ -109170,12 +109170,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PAGES"
                     type="checkbox"
                     value="false"
@@ -109193,12 +109193,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PRODUCTS"
                     type="checkbox"
                     value="false"
@@ -109216,12 +109216,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SETTINGS"
                     type="checkbox"
                     value="false"
@@ -109239,12 +109239,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SHIPPING"
                     type="checkbox"
                     value="false"
@@ -109262,12 +109262,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_STAFF"
                     type="checkbox"
                     value="false"
@@ -109285,12 +109285,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_USERS"
                     type="checkbox"
                     value="false"
@@ -109308,12 +109308,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PLUGINS"
                     type="checkbox"
                     value="false"
@@ -109331,12 +109331,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SERVICE_ACCOUNTS"
                     type="checkbox"
                     value="false"
@@ -109354,12 +109354,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_WEBHOOKS"
                     type="checkbox"
                     value="false"
@@ -109375,28 +109375,28 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Account Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -109410,12 +109410,12 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="isActive"
                   type="checkbox"
                   value="false"
@@ -109447,7 +109447,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Account
         </div>
@@ -109455,34 +109455,34 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -109534,22 +109534,22 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Permissions
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -109566,12 +109566,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="hasFullAccess"
                     type="checkbox"
                     value="false"
@@ -109596,12 +109596,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="IMPERSONATE_USERS"
                     type="checkbox"
                     value="false"
@@ -109619,12 +109619,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_DISCOUNTS"
                     type="checkbox"
                     value="false"
@@ -109642,12 +109642,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_MENUS"
                     type="checkbox"
                     value="false"
@@ -109665,12 +109665,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_ORDERS"
                     type="checkbox"
                     value="false"
@@ -109688,12 +109688,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PAGES"
                     type="checkbox"
                     value="false"
@@ -109711,12 +109711,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PRODUCTS"
                     type="checkbox"
                     value="false"
@@ -109734,12 +109734,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SETTINGS"
                     type="checkbox"
                     value="false"
@@ -109757,12 +109757,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SHIPPING"
                     type="checkbox"
                     value="false"
@@ -109780,12 +109780,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_STAFF"
                     type="checkbox"
                     value="false"
@@ -109803,12 +109803,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_USERS"
                     type="checkbox"
                     value="false"
@@ -109826,12 +109826,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_PLUGINS"
                     type="checkbox"
                     value="false"
@@ -109849,12 +109849,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_SERVICE_ACCOUNTS"
                     type="checkbox"
                     value="false"
@@ -109872,12 +109872,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="MANAGE_WEBHOOKS"
                     type="checkbox"
                     value="false"
@@ -109893,28 +109893,28 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Account Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -109928,12 +109928,12 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
               class="MuiFormControlLabel-root-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id"
+                class="MuiButtonBase-root-id Checkbox-root-id"
                 tabindex="0"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id"
+                  class="Checkbox-box-id"
                   name="isActive"
                   type="checkbox"
                   value="false"
@@ -109965,7 +109965,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Account
         </div>
@@ -109973,34 +109973,34 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -110048,22 +110048,22 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Permissions
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -110080,13 +110080,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="hasFullAccess"
                     type="checkbox"
@@ -110112,13 +110112,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="IMPERSONATE_USERS"
                     type="checkbox"
@@ -110137,13 +110137,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_DISCOUNTS"
                     type="checkbox"
@@ -110162,13 +110162,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_MENUS"
                     type="checkbox"
@@ -110187,13 +110187,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_ORDERS"
                     type="checkbox"
@@ -110212,13 +110212,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_PAGES"
                     type="checkbox"
@@ -110237,13 +110237,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_PRODUCTS"
                     type="checkbox"
@@ -110262,13 +110262,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_SETTINGS"
                     type="checkbox"
@@ -110287,13 +110287,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_SHIPPING"
                     type="checkbox"
@@ -110312,13 +110312,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_STAFF"
                     type="checkbox"
@@ -110337,13 +110337,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_USERS"
                     type="checkbox"
@@ -110362,13 +110362,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_PLUGINS"
                     type="checkbox"
@@ -110387,13 +110387,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_SERVICE_ACCOUNTS"
                     type="checkbox"
@@ -110412,13 +110412,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="MANAGE_WEBHOOKS"
                     type="checkbox"
@@ -110435,28 +110435,28 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-spacer-id"
+          class="CardSpacer-spacer-id"
         />
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Account Status
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -110470,13 +110470,13 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
               class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
             >
               <button
-                class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                 disabled=""
                 tabindex="-1"
                 type="button"
               >
                 <input
-                  class="makeStyles-box-id makeStyles-disabled-id"
+                  class="Checkbox-box-id Checkbox-disabled-id"
                   disabled=""
                   name="isActive"
                   type="checkbox"
@@ -110515,7 +110515,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Magento Importer
         </div>
@@ -110523,34 +110523,34 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -110593,21 +110593,21 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -110623,10 +110623,10 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -110641,19 +110641,19 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                       scope="col"
                     >
                       Token Note
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                       scope="col"
                     >
                       Key
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                       scope="col"
                     >
                       Actions
@@ -110667,17 +110667,17 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                     >
                       default
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                     >
                       **** AK05
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -110712,22 +110712,22 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -110744,12 +110744,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="hasFullAccess"
                       type="checkbox"
                       value="false"
@@ -110774,12 +110774,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
@@ -110797,12 +110797,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
@@ -110820,12 +110820,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
@@ -110843,12 +110843,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
@@ -110866,12 +110866,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
@@ -110889,12 +110889,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
                       value="true"
@@ -110912,12 +110912,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="false"
@@ -110935,12 +110935,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SHIPPING"
                       type="checkbox"
                       value="false"
@@ -110958,12 +110958,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_STAFF"
                       type="checkbox"
                       value="false"
@@ -110981,12 +110981,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_USERS"
                       type="checkbox"
                       value="false"
@@ -111004,12 +111004,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PLUGINS"
                       type="checkbox"
                       value="false"
@@ -111027,12 +111027,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
                       value="false"
@@ -111050,12 +111050,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
                       value="false"
@@ -111071,28 +111071,28 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -111106,12 +111106,12 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -111144,7 +111144,7 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Magento Importer
         </div>
@@ -111152,12 +111152,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
@@ -111180,7 +111180,7 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   >
                     This token gives you access to your shop's API, which you'll find here: 
                     <a
-                      class="MuiTypography-root-id makeStyles-root-id makeStyles-primary-id MuiTypography-body1-id"
+                      class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                       href="https://example.com/graphql/"
                     >
                       https://example.com/graphql/
@@ -111241,28 +111241,28 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -111305,21 +111305,21 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -111335,10 +111335,10 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -111353,19 +111353,19 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                       scope="col"
                     >
                       Token Note
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                       scope="col"
                     >
                       Key
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                       scope="col"
                     >
                       Actions
@@ -111379,17 +111379,17 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                     >
                       default
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                     >
                       **** AK05
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -111424,22 +111424,22 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -111456,12 +111456,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="hasFullAccess"
                       type="checkbox"
                       value="false"
@@ -111486,12 +111486,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
@@ -111509,12 +111509,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
@@ -111532,12 +111532,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
@@ -111555,12 +111555,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
@@ -111578,12 +111578,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
@@ -111601,12 +111601,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
                       value="true"
@@ -111624,12 +111624,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="false"
@@ -111647,12 +111647,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SHIPPING"
                       type="checkbox"
                       value="false"
@@ -111670,12 +111670,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_STAFF"
                       type="checkbox"
                       value="false"
@@ -111693,12 +111693,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_USERS"
                       type="checkbox"
                       value="false"
@@ -111716,12 +111716,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PLUGINS"
                       type="checkbox"
                       value="false"
@@ -111739,12 +111739,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
                       value="false"
@@ -111762,12 +111762,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
                       value="false"
@@ -111783,28 +111783,28 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -111818,12 +111818,12 @@ exports[`Storyshots Views / Services / Service details default token 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -111856,7 +111856,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Magento Importer
         </div>
@@ -111864,34 +111864,34 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -111939,21 +111939,21 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -111969,10 +111969,10 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -111987,19 +111987,19 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                       scope="col"
                     >
                       Token Note
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                       scope="col"
                     >
                       Key
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                       scope="col"
                     >
                       Actions
@@ -112013,17 +112013,17 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                     >
                       default
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                     >
                       **** AK05
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -112058,22 +112058,22 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -112090,12 +112090,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="hasFullAccess"
                       type="checkbox"
                       value="false"
@@ -112120,12 +112120,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
@@ -112143,12 +112143,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
@@ -112166,12 +112166,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
@@ -112189,12 +112189,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
@@ -112212,12 +112212,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
@@ -112235,12 +112235,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
                       value="true"
@@ -112258,12 +112258,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="false"
@@ -112281,12 +112281,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SHIPPING"
                       type="checkbox"
                       value="false"
@@ -112304,12 +112304,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_STAFF"
                       type="checkbox"
                       value="false"
@@ -112327,12 +112327,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_USERS"
                       type="checkbox"
                       value="false"
@@ -112350,12 +112350,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_PLUGINS"
                       type="checkbox"
                       value="false"
@@ -112373,12 +112373,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
                       value="false"
@@ -112396,12 +112396,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
                       value="false"
@@ -112417,28 +112417,28 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -112452,12 +112452,12 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -112490,10 +112490,10 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -112503,34 +112503,34 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -112574,21 +112574,21 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Service Account Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -112604,10 +112604,10 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -112622,19 +112622,19 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                       scope="col"
                     >
                       Token Note
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                       scope="col"
                     >
                       Key
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                       scope="col"
                     >
                       Actions
@@ -112648,25 +112648,25 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colNote-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colKey-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActions-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -112701,22 +112701,22 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -112733,13 +112733,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="hasFullAccess"
                       type="checkbox"
@@ -112765,13 +112765,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="IMPERSONATE_USERS"
                       type="checkbox"
@@ -112790,13 +112790,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
@@ -112815,13 +112815,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_MENUS"
                       type="checkbox"
@@ -112840,13 +112840,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_ORDERS"
                       type="checkbox"
@@ -112865,13 +112865,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PAGES"
                       type="checkbox"
@@ -112890,13 +112890,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
@@ -112915,13 +112915,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SETTINGS"
                       type="checkbox"
@@ -112940,13 +112940,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SHIPPING"
                       type="checkbox"
@@ -112965,13 +112965,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_STAFF"
                       type="checkbox"
@@ -112990,13 +112990,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_USERS"
                       type="checkbox"
@@ -113015,13 +113015,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PLUGINS"
                       type="checkbox"
@@ -113040,13 +113040,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
@@ -113065,13 +113065,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
@@ -113088,28 +113088,28 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -113123,13 +113123,13 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isActive"
                     type="checkbox"
@@ -113162,7 +113162,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Service Accounts
       </div>
@@ -113170,7 +113170,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -113190,7 +113190,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -113201,25 +113201,25 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Service Accounts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -113231,14 +113231,14 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -113261,13 +113261,13 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id ServiceList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -113276,7 +113276,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
                 scope="col"
               >
                 Name
@@ -113294,14 +113294,14 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="2"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -113340,10 +113340,10 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -113370,7 +113370,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -113404,10 +113404,10 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ServiceList-tableRow-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -113422,7 +113422,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -113469,10 +113469,10 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ServiceList-tableRow-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -113487,7 +113487,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -113534,10 +113534,10 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id ServiceList-tableRow-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
               >
                 <span
                   data-tc="name"
@@ -113552,7 +113552,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -113617,7 +113617,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Service Accounts
       </div>
@@ -113625,7 +113625,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -113645,7 +113645,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -113656,25 +113656,25 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Service Accounts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -113686,14 +113686,14 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -113716,13 +113716,13 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id ServiceList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -113731,7 +113731,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
                 scope="col"
               >
                 Name
@@ -113749,14 +113749,14 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="2"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -113795,10 +113795,10 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -113825,7 +113825,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -113863,13 +113863,13 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
               class="MuiTableRow-root-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
               >
                 <span
                   data-tc="name"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -113880,7 +113880,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
                 />
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -113945,7 +113945,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Service Accounts
       </div>
@@ -113953,7 +113953,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -113973,7 +113973,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -113984,25 +113984,25 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Service Accounts
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -114014,14 +114014,14 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -114044,13 +114044,13 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id ServiceList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -114059,7 +114059,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
                 scope="col"
               >
                 Name
@@ -114077,14 +114077,14 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="2"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -114123,10 +114123,10 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -114153,7 +114153,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -114222,7 +114222,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Shipping Zone
         </div>
@@ -114230,34 +114230,34 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -114300,21 +114300,21 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Countries
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -114330,13 +114330,13 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-root-id"
+              class="MuiCardContent-root-id CountryList-root-id"
             >
               <div
                 class="ResponsiveTable-root-id"
@@ -114348,15 +114348,15 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                     class="MuiTableBody-root-id"
                   >
                     <tr
-                      class="MuiTableRow-root-id makeStyles-pointer-id"
+                      class="MuiTableRow-root-id CountryList-pointer-id"
                     >
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                       >
                         0 Countries
                       </td>
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                       >
                         <button
                           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -114405,7 +114405,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create New Shipping Zone
         </div>
@@ -114413,34 +114413,34 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -114488,21 +114488,21 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Countries
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -114518,13 +114518,13 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-root-id"
+              class="MuiCardContent-root-id CountryList-root-id"
             >
               <div
                 class="ResponsiveTable-root-id"
@@ -114536,15 +114536,15 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                     class="MuiTableBody-root-id"
                   >
                     <tr
-                      class="MuiTableRow-root-id makeStyles-pointer-id"
+                      class="MuiTableRow-root-id CountryList-pointer-id"
                     >
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                       >
                         0 Countries
                       </td>
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                       >
                         <button
                           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -114593,7 +114593,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Europe
         </div>
@@ -114601,34 +114601,34 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -114671,21 +114671,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Countries
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -114701,13 +114701,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-root-id"
+              class="MuiCardContent-root-id CountryList-root-id"
             >
               <div
                 class="ResponsiveTable-root-id"
@@ -114719,15 +114719,15 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableBody-root-id"
                   >
                     <tr
-                      class="MuiTableRow-root-id makeStyles-pointer-id"
+                      class="MuiTableRow-root-id CountryList-pointer-id"
                     >
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                       >
                         51 Countries
                       </td>
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                       >
                         <button
                           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -114758,21 +114758,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Price Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -114788,10 +114788,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -114806,19 +114806,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Value Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -114840,7 +114840,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       UPS
                     </td>
@@ -114855,7 +114855,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       $48.11
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -114880,7 +114880,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -114909,7 +114909,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       DHL
                     </td>
@@ -114924,7 +114924,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       $95.24
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -114949,7 +114949,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -114979,21 +114979,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Weight Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -115009,10 +115009,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -115027,19 +115027,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Weight Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -115061,7 +115061,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       DB Schenker
                     </td>
@@ -115076,7 +115076,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       $45.93
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115101,7 +115101,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115130,7 +115130,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       Registred priority
                     </td>
@@ -115145,7 +115145,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       $73.87
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115170,7 +115170,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115218,7 +115218,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Europe
         </div>
@@ -115226,34 +115226,34 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -115301,21 +115301,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Countries
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -115331,13 +115331,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-root-id"
+              class="MuiCardContent-root-id CountryList-root-id"
             >
               <div
                 class="ResponsiveTable-root-id"
@@ -115349,15 +115349,15 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableBody-root-id"
                   >
                     <tr
-                      class="MuiTableRow-root-id makeStyles-pointer-id"
+                      class="MuiTableRow-root-id CountryList-pointer-id"
                     >
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                       >
                         51 Countries
                       </td>
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                       >
                         <button
                           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -115388,21 +115388,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Price Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -115418,10 +115418,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -115436,19 +115436,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Value Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -115470,7 +115470,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       UPS
                     </td>
@@ -115485,7 +115485,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       $48.11
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115510,7 +115510,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115539,7 +115539,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       DHL
                     </td>
@@ -115554,7 +115554,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       $95.24
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115579,7 +115579,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115609,21 +115609,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Weight Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -115639,10 +115639,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -115657,19 +115657,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Weight Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -115691,7 +115691,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       DB Schenker
                     </td>
@@ -115706,7 +115706,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       $45.93
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115731,7 +115731,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115760,7 +115760,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       Registred priority
                     </td>
@@ -115775,7 +115775,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       $73.87
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115800,7 +115800,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -115848,10 +115848,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -115861,34 +115861,34 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 General Informations
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -115931,21 +115931,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Countries
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -115961,13 +115961,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-root-id"
+              class="MuiCardContent-root-id CountryList-root-id"
             >
               <div
                 class="ResponsiveTable-root-id"
@@ -115979,15 +115979,15 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     class="MuiTableBody-root-id"
                   >
                     <tr
-                      class="MuiTableRow-root-id makeStyles-pointer-id"
+                      class="MuiTableRow-root-id CountryList-pointer-id"
                     >
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-wideColumn-id makeStyles-toLeft-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                       >
                         ... Countries
                       </td>
                       <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id makeStyles-iconCell-id"
+                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                       >
                         <button
                           class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -116018,21 +116018,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Price Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -116048,10 +116048,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -116066,19 +116066,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Value Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -116100,10 +116100,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -116112,7 +116112,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -116121,13 +116121,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -116153,7 +116153,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -116184,21 +116184,21 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id makeStyles-constantHeight-id"
+              class="CardTitle-root-id CardTitle-constantHeight-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Weight Based Rates
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -116214,10 +116214,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="ResponsiveTable-root-id"
@@ -116232,19 +116232,19 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-valueColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                       scope="col"
                     >
                       Weight Range
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                       scope="col"
                     >
                       Price
@@ -116266,10 +116266,10 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-nameColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -116278,7 +116278,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -116287,13 +116287,13 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -116319,7 +116319,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                       </button>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -116367,7 +116367,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Shipping
       </div>
@@ -116375,27 +116375,27 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id makeStyles-constantHeight-id"
+            class="CardTitle-root-id CardTitle-constantHeight-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Shipping By Zone
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -116411,10 +116411,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -116433,25 +116433,25 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     scope="col"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                     scope="col"
                   >
                     Name
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                     scope="col"
                   >
                     Countries
@@ -116469,14 +116469,14 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="4"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       >
                         <div>
                           <span
@@ -116515,10 +116515,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                         </div>
                       </div>
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                           data-tc="button-pagination-back"
                           disabled=""
                           tabindex="-1"
@@ -116545,7 +116545,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-next"
                           tabindex="0"
                           type="button"
@@ -116579,35 +116579,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Europe
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -116633,35 +116633,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Oceania
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     29
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -116687,35 +116687,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Asia
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -116741,35 +116741,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Americas
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     57
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -116795,35 +116795,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Africa
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     60
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -116859,28 +116859,28 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Configuration
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -116940,7 +116940,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -116976,7 +116976,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Shipping
       </div>
@@ -116984,27 +116984,27 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id makeStyles-constantHeight-id"
+            class="CardTitle-root-id CardTitle-constantHeight-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Shipping By Zone
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -117020,10 +117020,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -117042,13 +117042,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                     scope="col"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                       disabled=""
                       tabindex="-1"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                        class="Checkbox-box-id Checkbox-disabled-id"
                         disabled=""
                         type="checkbox"
                         value="false"
@@ -117056,13 +117056,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                     </button>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                     scope="col"
                   >
                     Name
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                     scope="col"
                   >
                     Countries
@@ -117080,14 +117080,14 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="4"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       >
                         <div>
                           <span
@@ -117126,10 +117126,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                         </div>
                       </div>
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                           data-tc="button-pagination-back"
                           disabled=""
                           tabindex="-1"
@@ -117156,7 +117156,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                           data-tc="button-pagination-next"
                           disabled=""
                           tabindex="-1"
@@ -117191,19 +117191,19 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                       disabled=""
                       tabindex="-1"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id makeStyles-disabled-id"
+                        class="Checkbox-box-id Checkbox-disabled-id"
                         disabled=""
                         type="checkbox"
                         value="false"
@@ -117211,25 +117211,25 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -117266,28 +117266,28 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Configuration
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
@@ -117346,7 +117346,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -117382,7 +117382,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Shipping
       </div>
@@ -117390,27 +117390,27 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id makeStyles-constantHeight-id"
+            class="CardTitle-root-id CardTitle-constantHeight-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Shipping By Zone
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -117426,10 +117426,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -117444,13 +117444,13 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                     scope="col"
                   >
                     Name
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                     scope="col"
                   >
                     Countries
@@ -117468,14 +117468,14 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="4"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       >
                         <div>
                           <span
@@ -117514,10 +117514,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                         </div>
                       </div>
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                           data-tc="button-pagination-back"
                           disabled=""
                           tabindex="-1"
@@ -117544,7 +117544,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-next"
                           tabindex="0"
                           type="button"
@@ -117598,28 +117598,28 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Configuration
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id makeStyles-formControl-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
@@ -117679,7 +117679,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
               </div>
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -117715,7 +117715,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Shipping
       </div>
@@ -117723,27 +117723,27 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id makeStyles-constantHeight-id"
+            class="CardTitle-root-id CardTitle-constantHeight-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Shipping By Zone
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -117759,10 +117759,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -117781,25 +117781,25 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     scope="col"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                     scope="col"
                   >
                     Name
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                     scope="col"
                   >
                     Countries
@@ -117817,14 +117817,14 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                   class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                     colspan="4"
                   >
                     <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                     >
                       <div
-                        class="makeStyles-spacer-id"
+                        class="TablePagination-spacer-id"
                       >
                         <div>
                           <span
@@ -117863,10 +117863,10 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                         </div>
                       </div>
                       <div
-                        class="makeStyles-root-id"
+                        class="TablePaginationActions-root-id"
                       >
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                           data-tc="button-pagination-back"
                           disabled=""
                           tabindex="-1"
@@ -117893,7 +117893,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                           </span>
                         </button>
                         <button
-                          class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                           data-tc="button-pagination-next"
                           tabindex="0"
                           type="button"
@@ -117927,35 +117927,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Europe
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -117981,35 +117981,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Oceania
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     29
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -118035,35 +118035,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Asia
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -118089,35 +118089,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Americas
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     57
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -118143,35 +118143,35 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                   </td>
                 </tr>
                 <tr
-                  class="MuiTableRow-root-id makeStyles-row-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id makeStyles-root-id"
+                      class="MuiButtonBase-root-id Checkbox-root-id"
                       tabindex="0"
                       type="button"
                     >
                       <input
-                        class="makeStyles-box-id"
+                        class="Checkbox-box-id"
                         type="checkbox"
                         value="false"
                       />
                     </button>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                   >
                     Africa
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colCountries-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                   >
                     60
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -118219,7 +118219,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           General Informations
         </div>
@@ -118227,12 +118227,12 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -118250,22 +118250,22 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               General Informations
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -118311,7 +118311,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118349,7 +118349,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118394,7 +118394,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -118412,22 +118412,22 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Mailing Configuration
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -118478,7 +118478,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118521,13 +118521,13 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118573,7 +118573,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -118588,25 +118588,25 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Store Information
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -118647,7 +118647,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118685,7 +118685,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118722,10 +118722,10 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118799,13 +118799,13 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118899,7 +118899,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -118939,7 +118939,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -118957,15 +118957,15 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Authentication Keys
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -118981,10 +118981,10 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -119033,7 +119033,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                     n1n62jkn2123:123n
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -119080,7 +119080,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           General Informations
         </div>
@@ -119088,12 +119088,12 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -119111,22 +119111,22 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               General Informations
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -119172,7 +119172,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119215,7 +119215,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119260,7 +119260,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -119278,22 +119278,22 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Mailing Configuration
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -119349,7 +119349,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119392,13 +119392,13 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119444,7 +119444,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -119459,25 +119459,25 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Store Information
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -119518,7 +119518,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119556,7 +119556,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119593,10 +119593,10 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119670,13 +119670,13 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119770,7 +119770,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -119810,7 +119810,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -119828,15 +119828,15 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Authentication Keys
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
@@ -119852,10 +119852,10 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -119904,7 +119904,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                     n1n62jkn2123:123n
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -119951,7 +119951,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           General Informations
         </div>
@@ -119959,12 +119959,12 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
@@ -119982,22 +119982,22 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               General Informations
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -120044,7 +120044,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120083,7 +120083,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120129,7 +120129,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -120147,22 +120147,22 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Mailing Configuration
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -120214,7 +120214,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120258,13 +120258,13 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </p>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120311,7 +120311,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -120326,25 +120326,25 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           </div>
         </div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id makeStyles-root-id MuiPaper-rounded-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Store Information
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             />
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="MuiCardContent-root-id"
@@ -120386,7 +120386,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120425,7 +120425,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120464,10 +120464,10 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120543,13 +120543,13 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
-              class="makeStyles-root-id makeStyles-default-id"
+              class="Grid-root-id Grid-default-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120646,7 +120646,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               </div>
             </div>
             <div
-              class="makeStyles-spacer-id"
+              class="FormSpacer-spacer-id"
             />
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -120687,7 +120687,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           </div>
         </div>
         <hr
-          class="makeStyles-root-id SiteSettingsPage-hr-id"
+          class="Hr-root-id SiteSettingsPage-hr-id"
         />
         <div>
           <div
@@ -120705,15 +120705,15 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
             >
               Authentication Keys
             </span>
             <div
-              class="makeStyles-toolbar-id"
+              class="CardTitle-toolbar-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
@@ -120730,10 +120730,10 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-children-id"
+            class="CardTitle-children-id"
           />
           <hr
-            class="makeStyles-hr-id"
+            class="CardTitle-hr-id"
           />
           <div
             class="ResponsiveTable-root-id"
@@ -120775,7 +120775,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -120784,13 +120784,13 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-iconCell-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -120837,7 +120837,7 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Jacob Smith
         </div>
@@ -120845,34 +120845,34 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Staff Member Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121022,22 +121022,22 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121054,12 +121054,12 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="hasFullAccess"
                       type="checkbox"
                       value="true"
@@ -121075,28 +121075,28 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121110,12 +121110,12 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -121148,7 +121148,7 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Jacob Smith
         </div>
@@ -121156,34 +121156,34 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Staff Member Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121355,28 +121355,28 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Preferences
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -121440,7 +121440,7 @@ exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -121468,10 +121468,10 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           <span
-            class="makeStyles-skeleton-id"
+            class="Skeleton-skeleton-id"
             style="width:10em"
           >
             ‌
@@ -121481,34 +121481,34 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Staff Member Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121661,22 +121661,22 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -121693,13 +121693,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="hasFullAccess"
                       type="checkbox"
@@ -121725,13 +121725,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="IMPERSONATE_USERS"
                       type="checkbox"
@@ -121750,13 +121750,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
@@ -121775,13 +121775,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_MENUS"
                       type="checkbox"
@@ -121800,13 +121800,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_ORDERS"
                       type="checkbox"
@@ -121825,13 +121825,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PAGES"
                       type="checkbox"
@@ -121850,13 +121850,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
@@ -121875,13 +121875,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SETTINGS"
                       type="checkbox"
@@ -121900,13 +121900,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SHIPPING"
                       type="checkbox"
@@ -121925,13 +121925,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_STAFF"
                       type="checkbox"
@@ -121950,13 +121950,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_USERS"
                       type="checkbox"
@@ -121975,13 +121975,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_PLUGINS"
                       type="checkbox"
@@ -122000,13 +122000,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
@@ -122025,13 +122025,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
@@ -122048,28 +122048,28 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -122083,13 +122083,13 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isActive"
                     type="checkbox"
@@ -122123,7 +122123,7 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Jacob Smith
         </div>
@@ -122131,34 +122131,34 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Staff Member Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -122308,22 +122308,22 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Permissions
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -122340,12 +122340,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="hasFullAccess"
                       type="checkbox"
                       value="false"
@@ -122370,12 +122370,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
@@ -122393,12 +122393,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="true"
@@ -122416,12 +122416,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_MENUS"
                       type="checkbox"
                       value="true"
@@ -122439,12 +122439,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_ORDERS"
                       type="checkbox"
                       value="true"
@@ -122462,12 +122462,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PAGES"
                       type="checkbox"
                       value="true"
@@ -122485,12 +122485,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PRODUCTS"
                       type="checkbox"
                       value="true"
@@ -122508,12 +122508,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="true"
@@ -122531,12 +122531,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_SHIPPING"
                       type="checkbox"
                       value="true"
@@ -122554,12 +122554,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_STAFF"
                       type="checkbox"
                       value="true"
@@ -122577,12 +122577,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_USERS"
                       type="checkbox"
                       value="true"
@@ -122600,12 +122600,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_PLUGINS"
                       type="checkbox"
                       value="true"
@@ -122623,12 +122623,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_SERVICE_ACCOUNTS"
                       type="checkbox"
                       value="true"
@@ -122646,12 +122646,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-checked-id"
+                      class="Checkbox-box-id Checkbox-checked-id"
                       name="MANAGE_WEBHOOKS"
                       type="checkbox"
                       value="true"
@@ -122667,28 +122667,28 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Account Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -122702,12 +122702,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -122739,7 +122739,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Staff Members
       </div>
@@ -122747,7 +122747,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -122767,7 +122767,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -122778,25 +122778,25 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Staff Members
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -122808,14 +122808,14 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Staff Member"
               type="text"
               value=""
@@ -122838,7 +122838,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -122853,7 +122853,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
                 scope="col"
               >
                 Name
@@ -122873,14 +122873,14 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="3"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -122919,10 +122919,10 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -122949,7 +122949,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -122983,16 +122983,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123002,7 +123002,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Chris Cooper
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123014,16 +123014,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123033,7 +123033,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Inactive
                 </div>
@@ -123045,16 +123045,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123064,7 +123064,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123076,16 +123076,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123095,7 +123095,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123107,16 +123107,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123126,7 +123126,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123138,16 +123138,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123157,7 +123157,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123169,16 +123169,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123188,7 +123188,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Inactive
                 </div>
@@ -123200,16 +123200,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123219,7 +123219,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123231,16 +123231,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123250,7 +123250,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123262,16 +123262,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123281,7 +123281,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Inactive
                 </div>
@@ -123293,16 +123293,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123312,7 +123312,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Inactive
                 </div>
@@ -123324,16 +123324,16 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <img
-                    class="makeStyles-avatarImage-id"
+                    class="StaffList-avatarImage-id"
                     src="avatar1.png"
                   />
                 </div>
@@ -123343,7 +123343,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
                   Jacob Smith
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   Active
                 </div>
@@ -123373,7 +123373,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Staff Members
       </div>
@@ -123381,7 +123381,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -123401,7 +123401,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -123412,25 +123412,25 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Staff Members
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -123442,14 +123442,14 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Staff Member"
               type="text"
               value=""
@@ -123472,7 +123472,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -123487,7 +123487,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
                 scope="col"
               >
                 Name
@@ -123507,14 +123507,14 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="3"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -123553,10 +123553,10 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -123583,7 +123583,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -123624,10 +123624,10 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <div
-                  class="makeStyles-avatar-id"
+                  class="StaffList-avatar-id"
                 >
                   <div
-                    class="makeStyles-avatarDefault-id"
+                    class="StaffList-avatarDefault-id"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
@@ -123638,16 +123638,16 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
                 </div>
                 <div
-                  class="MuiTypography-root-id makeStyles-statusText-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                 >
                   <span
-                    class="makeStyles-skeleton-id"
+                    class="Skeleton-skeleton-id"
                   >
                     ‌
                   </span>
@@ -123657,7 +123657,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -123683,7 +123683,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Taxes
         </div>
@@ -123691,48 +123691,48 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Configuration
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id TaxConfiguration-content-id"
             >
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="includeTax"
                     type="checkbox"
                     value="false"
@@ -123745,18 +123745,18 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="showGross"
                     type="checkbox"
                     value="true"
@@ -123769,18 +123769,18 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="chargeTaxesOnShipping"
                     type="checkbox"
                     value="false"
@@ -123793,11 +123793,11 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -123845,7 +123845,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Country Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                       scope="col"
                     >
                       Reduced Tax Rates
@@ -123856,7 +123856,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123869,13 +123869,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Austria
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123888,13 +123888,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Belgia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       10
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123907,13 +123907,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Bułgaria
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       1
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123926,13 +123926,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Cypr
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       11
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123945,13 +123945,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Czechy
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       11
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123964,13 +123964,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Niemcy
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -123983,13 +123983,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Dania
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       0
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124002,13 +124002,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Estonia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       4
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124021,13 +124021,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Hiszpania
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124040,13 +124040,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Finlandia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       10
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124059,13 +124059,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Francja
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       13
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124078,13 +124078,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Wielka Brytania
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124097,13 +124097,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Grecja
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       9
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124116,13 +124116,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Chorwacja
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       2
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124135,13 +124135,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Węgry
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       5
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124154,13 +124154,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Irlandia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       10
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124173,13 +124173,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Włochy
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       10
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124192,13 +124192,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Litwa
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       3
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124211,13 +124211,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Luksemburg
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       17
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124230,13 +124230,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Łotwa
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       5
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124249,13 +124249,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Malta
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124268,13 +124268,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Holandia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       9
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124287,13 +124287,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Polska
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       10
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124306,13 +124306,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Portugalia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       8
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124325,13 +124325,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Rumunia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       9
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124344,13 +124344,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Szwecja
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       2
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124363,13 +124363,13 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Słowenia
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       9
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -124382,7 +124382,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
                       Słowacja
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       6
                     </td>
@@ -124410,7 +124410,7 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Taxes
         </div>
@@ -124418,49 +124418,49 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-inverted-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Configuration
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id makeStyles-content-id"
+              class="MuiCardContent-root-id TaxConfiguration-content-id"
             >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="includeTax"
                     type="checkbox"
@@ -124474,19 +124474,19 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="showGross"
                     type="checkbox"
@@ -124500,19 +124500,19 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="chargeTaxesOnShipping"
                     type="checkbox"
@@ -124526,11 +124526,11 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
             </div>
             <hr
-              class="makeStyles-root-id"
+              class="Hr-root-id"
             />
             <div
               class="MuiCardActions-root-id MuiCardActions-spacing-id"
@@ -124579,7 +124579,7 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                       Country Name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                       scope="col"
                     >
                       Reduced Tax Rates
@@ -124596,7 +124596,7 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -124605,16 +124605,16 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                     >
                       <span
-                        class="makeStyles-skeleton-id"
+                        class="Skeleton-skeleton-id"
                       >
                         ‌
                       </span>
@@ -124642,7 +124642,7 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Tax Rates in Austria
       </div>
@@ -124650,12 +124650,12 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
@@ -124674,7 +124674,7 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
                     scope="col"
                   >
                     Category
@@ -124823,10 +124823,10 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         <span
-          class="makeStyles-skeleton-id"
+          class="Skeleton-skeleton-id"
           style="width:10em"
         >
           ‌
@@ -124836,12 +124836,12 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
     <div
-      class="makeStyles-root-id makeStyles-default-id"
+      class="Grid-root-id Grid-default-id"
     >
       <div>
         <div
@@ -124860,7 +124860,7 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
                   class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
                     scope="col"
                   >
                     Category
@@ -124883,7 +124883,7 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -124892,7 +124892,7 @@ exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <span
-                      class="makeStyles-skeleton-id"
+                      class="Skeleton-skeleton-id"
                     >
                       ‌
                     </span>
@@ -124919,7 +124919,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Translations to English
       </div>
@@ -124927,7 +124927,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -124935,7 +124935,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -124946,85 +124946,85 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Categories
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Collections
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 Products
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Sales
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Vouchers
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Pages
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Product Types
               </span>
@@ -125036,14 +125036,14 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Product"
               type="text"
               value=""
@@ -125066,7 +125066,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
@@ -125081,13 +125081,13 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-wideColumn-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-wideColumn-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-textRight-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-textRight-id"
                 scope="col"
               >
                 Completed Translations
@@ -125101,20 +125101,20 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="2"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   />
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -125141,7 +125141,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -125175,7 +125175,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -125183,13 +125183,13 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
                 White Hoodie
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
               >
                 1 of 3
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -125197,7 +125197,7 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
                 Brown Supreme Hoodie
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-textRight-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
               >
                 2 of 3
               </td>
@@ -125221,7 +125221,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Languages
       </div>
@@ -125229,7 +125229,7 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -125260,37 +125260,37 @@ exports[`Storyshots Views / Translations / Language list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
               >
                 niemiecki
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
               >
                 angielski
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
               >
                 hiszpański
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-link-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
               >
                 polski
               </td>
@@ -125314,7 +125314,7 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Languages
       </div>
@@ -125322,7 +125322,7 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -125356,10 +125356,10 @@ exports[`Storyshots Views / Translations / Language list loading 1`] = `
               class="MuiTableRow-root-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-capitalize-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
@@ -125384,7 +125384,7 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Languages
       </div>
@@ -125392,7 +125392,7 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         />
       </div>
     </div>
@@ -125452,7 +125452,7 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Webhook
         </div>
@@ -125460,40 +125460,40 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -125533,21 +125533,21 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -125606,7 +125606,7 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -125649,7 +125649,7 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -125699,22 +125699,22 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -125728,12 +125728,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="allEvents"
                     type="checkbox"
                     value="false"
@@ -125746,19 +125746,19 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="CUSTOMER_CREATED"
                       type="checkbox"
                       value="false"
@@ -125776,12 +125776,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CANCELLED"
                       type="checkbox"
                       value="false"
@@ -125799,12 +125799,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CREATED"
                       type="checkbox"
                       value="false"
@@ -125822,12 +125822,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULFILLED"
                       type="checkbox"
                       value="false"
@@ -125845,12 +125845,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
                       value="false"
@@ -125868,12 +125868,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_UPDATED"
                       type="checkbox"
                       value="false"
@@ -125891,12 +125891,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="PRODUCT_CREATED"
                       type="checkbox"
                       value="false"
@@ -125912,28 +125912,28 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -125947,12 +125947,12 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isActive"
                     type="checkbox"
                     value="false"
@@ -125985,7 +125985,7 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Webhook
         </div>
@@ -125993,40 +125993,40 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -126066,21 +126066,21 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126144,7 +126144,7 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126187,7 +126187,7 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126237,22 +126237,22 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -126266,12 +126266,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="allEvents"
                     type="checkbox"
                     value="false"
@@ -126284,19 +126284,19 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="CUSTOMER_CREATED"
                       type="checkbox"
                       value="false"
@@ -126314,12 +126314,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CANCELLED"
                       type="checkbox"
                       value="false"
@@ -126337,12 +126337,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CREATED"
                       type="checkbox"
                       value="false"
@@ -126360,12 +126360,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULFILLED"
                       type="checkbox"
                       value="false"
@@ -126383,12 +126383,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
                       value="false"
@@ -126406,12 +126406,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_UPDATED"
                       type="checkbox"
                       value="false"
@@ -126429,12 +126429,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="PRODUCT_CREATED"
                       type="checkbox"
                       value="false"
@@ -126450,28 +126450,28 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -126485,12 +126485,12 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="isActive"
                     type="checkbox"
                     value="false"
@@ -126523,7 +126523,7 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Create Webhook
         </div>
@@ -126531,40 +126531,40 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -126605,21 +126605,21 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126679,7 +126679,7 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126723,7 +126723,7 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -126774,22 +126774,22 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -126803,13 +126803,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="allEvents"
                     type="checkbox"
@@ -126823,20 +126823,20 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="CUSTOMER_CREATED"
                       type="checkbox"
@@ -126855,13 +126855,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_CANCELLED"
                       type="checkbox"
@@ -126880,13 +126880,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_CREATED"
                       type="checkbox"
@@ -126905,13 +126905,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_FULFILLED"
                       type="checkbox"
@@ -126930,13 +126930,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
@@ -126955,13 +126955,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_UPDATED"
                       type="checkbox"
@@ -126980,13 +126980,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="PRODUCT_CREATED"
                       type="checkbox"
@@ -127003,28 +127003,28 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -127038,13 +127038,13 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isActive"
                     type="checkbox"
@@ -127084,7 +127084,7 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Webhook Test 2 Details
         </div>
@@ -127092,40 +127092,40 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -127165,21 +127165,21 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127238,7 +127238,7 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127281,7 +127281,7 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127331,22 +127331,22 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -127360,12 +127360,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="allEvents"
                     type="checkbox"
                     value="false"
@@ -127378,19 +127378,19 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="CUSTOMER_CREATED"
                       type="checkbox"
                       value="false"
@@ -127408,12 +127408,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CANCELLED"
                       type="checkbox"
                       value="false"
@@ -127431,12 +127431,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CREATED"
                       type="checkbox"
                       value="false"
@@ -127454,12 +127454,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULFILLED"
                       type="checkbox"
                       value="false"
@@ -127477,12 +127477,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
                       value="false"
@@ -127500,12 +127500,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_UPDATED"
                       type="checkbox"
                       value="false"
@@ -127523,12 +127523,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="PRODUCT_CREATED"
                       type="checkbox"
                       value="false"
@@ -127544,28 +127544,28 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -127579,12 +127579,12 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -127617,7 +127617,7 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           Webhook Test 2 Details
         </div>
@@ -127625,40 +127625,40 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -127698,21 +127698,21 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127776,7 +127776,7 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127819,7 +127819,7 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -127869,22 +127869,22 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -127898,12 +127898,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id"
+                    class="Checkbox-box-id"
                     name="allEvents"
                     type="checkbox"
                     value="false"
@@ -127916,19 +127916,19 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="CUSTOMER_CREATED"
                       type="checkbox"
                       value="false"
@@ -127946,12 +127946,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CANCELLED"
                       type="checkbox"
                       value="false"
@@ -127969,12 +127969,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_CREATED"
                       type="checkbox"
                       value="false"
@@ -127992,12 +127992,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULFILLED"
                       type="checkbox"
                       value="false"
@@ -128015,12 +128015,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
                       value="false"
@@ -128038,12 +128038,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="ORDER_UPDATED"
                       type="checkbox"
                       value="false"
@@ -128061,12 +128061,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   class="MuiFormControlLabel-root-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id"
+                      class="Checkbox-box-id"
                       name="PRODUCT_CREATED"
                       type="checkbox"
                       value="false"
@@ -128082,28 +128082,28 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -128117,12 +128117,12 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                 class="MuiFormControlLabel-root-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id"
                   tabindex="0"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-checked-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
                     value="true"
@@ -128155,7 +128155,7 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
         class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
       >
         <div
-          class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
           ... Details
         </div>
@@ -128163,40 +128163,40 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
           class="ExtendedPageHeader-action-id"
         >
           <div
-            class="makeStyles-root-id"
+            class="PageHeader-root-id"
           />
         </div>
       </div>
       <div
-        class="makeStyles-root-id makeStyles-default-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Information
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 General Informations
               </div>
@@ -128237,21 +128237,21 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-body1-id"
+                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
               >
                 Webhook specific information
               </div>
               <div
-                class="makeStyles-container-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -128311,7 +128311,7 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -128355,7 +128355,7 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 </p>
               </div>
               <div
-                class="makeStyles-spacer-id"
+                class="FormSpacer-spacer-id"
               />
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -128406,22 +128406,22 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Events
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -128435,13 +128435,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="allEvents"
                     type="checkbox"
@@ -128455,20 +128455,20 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 </span>
               </label>
               <hr
-                class="makeStyles-root-id"
+                class="Hr-root-id"
               />
               <div>
                 <label
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="CUSTOMER_CREATED"
                       type="checkbox"
@@ -128487,13 +128487,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_CANCELLED"
                       type="checkbox"
@@ -128512,13 +128512,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_CREATED"
                       type="checkbox"
@@ -128537,13 +128537,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_FULFILLED"
                       type="checkbox"
@@ -128562,13 +128562,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_FULLY_PAID"
                       type="checkbox"
@@ -128587,13 +128587,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="ORDER_UPDATED"
                       type="checkbox"
@@ -128612,13 +128612,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <button
-                    class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <input
-                      class="makeStyles-box-id makeStyles-disabled-id"
+                      class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
                       name="PRODUCT_CREATED"
                       type="checkbox"
@@ -128635,28 +128635,28 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
             </div>
           </div>
           <div
-            class="makeStyles-spacer-id"
+            class="FormSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
             <div
-              class="makeStyles-root-id"
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 Webhook Status
               </span>
               <div
-                class="makeStyles-toolbar-id"
+                class="CardTitle-toolbar-id"
               />
             </div>
             <div
-              class="makeStyles-children-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="makeStyles-hr-id"
+              class="CardTitle-hr-id"
             />
             <div
               class="MuiCardContent-root-id"
@@ -128670,13 +128670,13 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <button
-                  class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
+                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <input
-                    class="makeStyles-box-id makeStyles-disabled-id"
+                    class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
                     name="isActive"
                     type="checkbox"
@@ -128709,7 +128709,7 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Webhooks
       </div>
@@ -128717,7 +128717,7 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -128737,7 +128737,7 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -128748,25 +128748,25 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Webhooks
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -128778,14 +128778,14 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -128808,13 +128808,13 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id WebhooksList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -128823,19 +128823,19 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colActive-id"
                 scope="col"
               >
                 Service Account
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colAction-id"
                 scope="col"
               >
                 Action
@@ -128849,14 +128849,14 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="3"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -128895,10 +128895,10 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -128925,7 +128925,7 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"
@@ -128959,20 +128959,20 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
             class="MuiTableBody-root-id"
           >
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id WebhooksList-tableRow-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id"
               >
                 Webhook Test
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
               >
                 Test Account
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -129019,20 +129019,20 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root-id makeStyles-tableRow-id MuiTableRow-hover-id"
+              class="MuiTableRow-root-id WebhooksList-tableRow-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id"
               >
                 Webhook Test 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
               >
                 Test Account 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -129097,7 +129097,7 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Webhooks
       </div>
@@ -129105,7 +129105,7 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -129125,7 +129125,7 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -129136,25 +129136,25 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Webhooks
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -129166,14 +129166,14 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -129196,13 +129196,13 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id WebhooksList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -129211,19 +129211,19 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colActive-id"
                 scope="col"
               >
                 Service Account
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colAction-id"
                 scope="col"
               >
                 Action
@@ -129237,14 +129237,14 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="3"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -129283,10 +129283,10 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -129313,7 +129313,7 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-next"
                       disabled=""
                       tabindex="-1"
@@ -129351,25 +129351,25 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
               class="MuiTableRow-root-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
               >
                 <span
-                  class="makeStyles-skeleton-id"
+                  class="Skeleton-skeleton-id"
                 >
                   ‌
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -129434,7 +129434,7 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
     >
       <div
-        class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
         Webhooks
       </div>
@@ -129442,7 +129442,7 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="makeStyles-root-id"
+          class="PageHeader-root-id"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
@@ -129462,7 +129462,7 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
     >
       <div
-        class="MuiTabs-root-id makeStyles-tabsRoot-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
         <div
           class="MuiTabs-scroller-id MuiTabs-fixed-id"
@@ -129473,25 +129473,25 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
             role="tablist"
           >
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id makeStyles-selectedTabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
               >
                 All Webhooks
               </span>
             </button>
             <button
-              class="MuiButtonBase-root-id MuiTab-root-id makeStyles-tabRoot-id MuiTab-textColorInherit-id"
+              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
               role="tab"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiTab-wrapper-id makeStyles-tabLabel-id"
+                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
               >
                 Tab X
               </span>
@@ -129503,14 +129503,14 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
         class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id makeStyles-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id makeStyles-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -129533,13 +129533,13 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
         </div>
       </div>
       <hr
-        class="makeStyles-root-id"
+        class="Hr-root-id"
       />
       <div
         class="ResponsiveTable-root-id"
       >
         <table
-          class="MuiTable-root-id makeStyles-table-id"
+          class="MuiTable-root-id WebhooksList-table-id"
         >
           <thead
             class="MuiTableHead-root-id"
@@ -129548,19 +129548,19 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-head-id"
             >
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colName-id"
                 scope="col"
               >
                 Name
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colActive-id"
                 scope="col"
               >
                 Service Account
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id makeStyles-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-colAction-id"
                 scope="col"
               >
                 Action
@@ -129574,14 +129574,14 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
               class="MuiTableRow-root-id MuiTableRow-footer-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id makeStyles-root-id"
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                 colspan="3"
               >
                 <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id makeStyles-toolbar-id MuiToolbar-gutters-id"
+                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                 >
                   <div
-                    class="makeStyles-spacer-id"
+                    class="TablePagination-spacer-id"
                   >
                     <div>
                       <span
@@ -129620,10 +129620,10 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-root-id"
+                    class="TablePaginationActions-root-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id makeStyles-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                       data-tc="button-pagination-back"
                       disabled=""
                       tabindex="-1"
@@ -129650,7 +129650,7 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
                       </span>
                     </button>
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id makeStyles-iconButton-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                       data-tc="button-pagination-next"
                       tabindex="0"
                       type="button"