diff --git a/src/components/Filter/reducer.test.ts b/src/components/Filter/reducer.test.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/orders/views/OrderList/__snapshots__/filters.test.ts.snap b/src/orders/views/OrderList/__snapshots__/filters.test.ts.snap
index 77dd07779..732d10dce 100644
--- a/src/orders/views/OrderList/__snapshots__/filters.test.ts.snap
+++ b/src/orders/views/OrderList/__snapshots__/filters.test.ts.snap
@@ -1,91 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Crate filter chips 1`] = `
-Array [
-  Object {
-    "label": "Date from 2019-09-01",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Date to 2019-09-10",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "email@example.com",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Fulfilled",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Partially Fulfilled",
-    "onClick": [Function],
-  },
-]
-`;
-
-exports[`Create filter object with date 1`] = `
-Object {
-  "dateFrom": "2019-09-01",
-  "dateTo": "2019-09-01",
-}
-`;
-
-exports[`Create filter object with date last month 1`] = `
-Object {
-  "dateFrom": "2019-09-01",
-  "dateTo": undefined,
-}
-`;
-
-exports[`Create filter object with date last week 1`] = `
-Object {
-  "dateFrom": "2019-09-01",
-  "dateTo": undefined,
-}
-`;
-
-exports[`Create filter object with date last year 1`] = `
-Object {
-  "dateFrom": "2019-09-01",
-  "dateTo": undefined,
-}
-`;
-
-exports[`Create filter object with date range 1`] = `
-Object {
-  "dateFrom": "2019-09-01",
-  "dateTo": "2019-09-10",
-}
-`;
-
-exports[`Create filter object with fulfillment status 1`] = `
-Object {
-  "status": Array [
-    "PARTIALLY_FULFILLED",
-  ],
-}
-`;
-
-exports[`Create filter object with multiple deduped values 1`] = `
-Object {
-  "status": Array [
-    "FULFILLED",
-  ],
-}
-`;
-
-exports[`Create filter object with multiple values 1`] = `
-Object {
-  "status": Array [
-    "FULFILLED",
-    "PARTIALLY_FULFILLED",
-  ],
-}
-`;
-
-exports[`Get filter variables from multiple status value 1`] = `
+exports[`Get filter variables 1`] = `
 Object {
   "created": Object {
     "gte": "2019-09-01",
@@ -99,17 +14,3 @@ Object {
   ],
 }
 `;
-
-exports[`Get filter variables from single status value 1`] = `
-Object {
-  "created": Object {
-    "gte": "2019-09-01",
-    "lte": "2019-09-10",
-  },
-  "customer": "email@example.com",
-  "search": "24",
-  "status": Array [
-    "FULFILLED",
-  ],
-}
-`;
diff --git a/src/products/views/ProductList/__snapshots__/filters.test.ts.snap b/src/products/views/ProductList/__snapshots__/filters.test.ts.snap
index 20fe2f275..5f3c7e2c2 100644
--- a/src/products/views/ProductList/__snapshots__/filters.test.ts.snap
+++ b/src/products/views/ProductList/__snapshots__/filters.test.ts.snap
@@ -1,61 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Crate filter chips 1`] = `
-Array [
-  Object {
-    "label": "Price from $10.00",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Price to $20.00",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Available",
-    "onClick": [Function],
-  },
-  Object {
-    "label": "Published",
-    "onClick": [Function],
-  },
-]
-`;
-
-exports[`Create filter object with price 1`] = `
-Object {
-  "priceFrom": "10",
-  "priceTo": "10",
-}
-`;
-
-exports[`Create filter object with price range 1`] = `
-Object {
-  "priceFrom": Array [
-    "10",
-    "20",
-  ],
-  "priceTo": Array [
-    "10",
-    "20",
-  ],
-}
-`;
-
-exports[`Create filter object with publication status 1`] = `
-Object {
-  "isPublished": "false",
-}
-`;
-
-exports[`Create filter object with stock status 1`] = `
-Object {
-  "status": "OUT_OF_STOCK",
-}
-`;
-
 exports[`Get filter variables 1`] = `
 Object {
-  "isPublished": true,
+  "isPublished": false,
   "price": Object {
     "gte": 10,
     "lte": 20,
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index e977ef717..b5a8203f5 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -1388,64 +1388,688 @@ exports[`Storyshots Generics / Filter default 1`] = `
   style="padding:24px"
 >
   <div
-    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
+    style="margin:auto;width:400px"
   >
     <div
-      class="MuiCardContent-root-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
     >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        />
+      <form>
         <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          class="FilterContent-actionBar-id"
         >
           <div
-            aria-haspopup="listbox"
-            aria-labelledby=" "
-            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"
+            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
           >
-            <span>
-              ​
-            </span>
+            Filters
           </div>
-          <input
-            type="hidden"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            style="padding-left:79.5px"
-          >
-            <legend
-              class="PrivateNotchedOutline-legend-id"
-              style="width:0.01px"
+          <div>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              tabindex="0"
+              type="button"
             >
-              <span>
-                ​
+              <span
+                class="MuiButton-label-id"
+              >
+                Clear
               </span>
-            </legend>
-          </fieldset>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Done
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
+        <hr
+          class="Hr-root-id"
+        />
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id Checkbox-checked-id"
+                type="checkbox"
+                value="true"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Created At
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterSettings-id"
+        >
+          <div
+            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"
+              data-shrink="true"
+            />
+            <div
+              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            >
+              <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 FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+                role="button"
+                tabindex="0"
+              >
+                between
+              </div>
+              <input
+                type="hidden"
+                value="MULTIPLE"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                style="padding-left:8px"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legend-id"
+                  style="width:143px"
+                >
+                  <span>
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="FilterContent-inputRange-id"
+          >
+            <div>
+              <svg
+                class="FilterContent-arrow-id"
+                fill="none"
+                height="21"
+                viewBox="0 0 18 21"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
+                  fill="#3D3D3D"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <div
+              class="MuiFormControl-root-id MuiTextField-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 FilterContent-input-id"
+                  name="createdAt_min"
+                  type="date"
+                  value="2019-09-09"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                  style="padding-left:8px"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-id"
+                    style="width:0"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <span
+              class="FilterContent-andLabel-id"
+            >
+              and
+            </span>
+            <div
+              class="MuiFormControl-root-id MuiTextField-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 FilterContent-input-id"
+                  name="createdAt_max"
+                  type="date"
+                  value="2019-10-23"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                  style="padding-left:8px"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-id"
+                    style="width:0"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id"
+                type="checkbox"
+                value="false"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Multiple Options
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id"
+                type="checkbox"
+                value="false"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Price
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id Checkbox-checked-id"
+                type="checkbox"
+                value="true"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Status
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterSettings-id"
+        >
+          <div
+            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"
+              data-shrink="true"
+            />
+            <div
+              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            >
+              <div
+                aria-haspopup="listbox"
+                aria-labelledby=" mui-component-select-status"
+                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+                id="mui-component-select-status"
+                role="button"
+                tabindex="0"
+              >
+                Value 1
+              </div>
+              <input
+                name="status"
+                type="hidden"
+                value="val1"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                style="padding-left:8px"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legend-id"
+                  style="width:143px"
+                >
+                  <span>
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / Filter interactive 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    style="margin:auto;width:400px"
+  >
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
+    >
+      <form>
+        <div
+          class="FilterContent-actionBar-id"
+        >
+          <div
+            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
+          >
+            Filters
+          </div>
+          <div>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Clear
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Done
+              </span>
+            </button>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id"
+        />
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id Checkbox-checked-id"
+                type="checkbox"
+                value="true"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Created At
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterSettings-id"
+        >
+          <div
+            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"
+              data-shrink="true"
+            />
+            <div
+              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            >
+              <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 FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+                role="button"
+                tabindex="0"
+              >
+                between
+              </div>
+              <input
+                type="hidden"
+                value="MULTIPLE"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                style="padding-left:8px"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legend-id"
+                  style="width:143px"
+                >
+                  <span>
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="FilterContent-inputRange-id"
+          >
+            <div>
+              <svg
+                class="FilterContent-arrow-id"
+                fill="none"
+                height="21"
+                viewBox="0 0 18 21"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
+                  fill="#3D3D3D"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <div
+              class="MuiFormControl-root-id MuiTextField-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 FilterContent-input-id"
+                  name="createdAt_min"
+                  type="date"
+                  value="2019-09-09"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                  style="padding-left:8px"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-id"
+                    style="width:0"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <span
+              class="FilterContent-andLabel-id"
+            >
+              and
+            </span>
+            <div
+              class="MuiFormControl-root-id MuiTextField-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 FilterContent-input-id"
+                  name="createdAt_max"
+                  type="date"
+                  value="2019-10-23"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                  style="padding-left:8px"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-id"
+                    style="width:0"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id"
+                type="checkbox"
+                value="false"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Multiple Options
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id"
+                type="checkbox"
+                value="false"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Price
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterFieldBar-id"
+        >
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id Checkbox-root-id"
+              tabindex="0"
+              type="button"
+            >
+              <input
+                class="Checkbox-box-id Checkbox-checked-id"
+                type="checkbox"
+                value="true"
+              />
+            </button>
+            <span
+              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+            >
+              Status
+            </span>
+          </label>
+        </div>
+        <div
+          class="FilterContent-filterSettings-id"
+        >
+          <div
+            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"
+              data-shrink="true"
+            />
+            <div
+              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            >
+              <div
+                aria-haspopup="listbox"
+                aria-labelledby=" mui-component-select-status"
+                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
+                id="mui-component-select-status"
+                role="button"
+                tabindex="0"
+              >
+                Value 1
+              </div>
+              <input
+                name="status"
+                type="hidden"
+                value="val1"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                style="padding-left:8px"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legend-id"
+                  style="width:143px"
+                >
+                  <span>
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+      </form>
     </div>
   </div>
 </div>
@@ -11587,17 +12211,17 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -11619,9 +12243,6 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -12566,17 +13187,17 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -12598,9 +13219,6 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -12961,17 +13579,17 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Attribute"
               type="text"
               value=""
@@ -12993,9 +13611,6 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -14204,17 +14819,17 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -14236,9 +14851,6 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -14753,17 +15365,17 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -14785,9 +15397,6 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -15074,17 +15683,17 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Category"
               type="text"
               value=""
@@ -15106,9 +15715,6 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -26351,17 +26957,17 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -26383,9 +26989,6 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -26937,17 +27540,17 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -26969,9 +27572,6 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -27318,17 +27918,17 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Collection"
               type="text"
               value=""
@@ -27350,9 +27950,6 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -37327,17 +37924,17 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -37359,9 +37956,6 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -38470,17 +39064,17 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -38502,9 +39096,6 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -38842,17 +39433,17 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Customer"
               type="text"
               value=""
@@ -38874,9 +39465,6 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -44350,17 +44938,17 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -44382,9 +44970,6 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -44916,17 +45501,17 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -44948,9 +45533,6 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -45312,17 +45894,17 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Sale"
               type="text"
               value=""
@@ -45344,9 +45926,6 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -50532,17 +51111,17 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -50564,9 +51143,6 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -51011,17 +51587,17 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -51043,9 +51619,6 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -51453,17 +52026,17 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Voucher"
               type="text"
               value=""
@@ -51485,9 +52058,6 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -55949,17 +56519,17 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -55981,9 +56551,6 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -57191,17 +57758,17 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -57223,9 +57790,6 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -57592,17 +58156,17 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Draft"
               type="text"
               value=""
@@ -57624,9 +58188,6 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -73101,7 +73662,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -73112,30 +73673,19 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -73157,9 +73707,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -74754,7 +75301,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -74765,30 +75312,19 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -74809,10 +75345,18 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
             </fieldset>
           </div>
         </div>
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete Search
+          </span>
+        </button>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -75225,7 +75769,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -75236,30 +75780,19 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Orders..."
               type="text"
               value=""
@@ -75281,9 +75814,6 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -75535,2054 +76065,6 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-    >
-      <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
-      >
-        Orders
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create order
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id"
-            role="tablist"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Orders
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterActions-actionContainer-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-            >
-              Add Filter
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          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 FilterActions-input-id"
-              placeholder="Search Orders..."
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              style="padding-left:8px"
-            >
-              <legend
-                class="PrivateNotchedOutline-legend-id"
-                style="width:0.01px"
-              >
-                <span>
-                  ​
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterChips-filterContainer-id"
-      >
-        <div
-          class="FilterChips-filterChipContainer-id"
-        >
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 0
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 1
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 2
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 3
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 4
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 5
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 6
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 7
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 8
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 9
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 10
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 11
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 12
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 13
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 14
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <button
-                  class="MuiButtonBase-root-id Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Order
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="24"
-                      width="24"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Date
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Payment
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Fulfillment status
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Total
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="7"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
-                >
-                  <div
-                    class="TablePagination-spacer-id"
-                  >
-                    <div>
-                      <span
-                        class="RowNumberSelect-label-id"
-                      >
-                        No of Rows:
-                      </span>
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                      >
-                        <div
-                          aria-haspopup="listbox"
-                          aria-labelledby=" "
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          20
-                        </div>
-                        <input
-                          type="hidden"
-                          value="20"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="TablePaginationActions-root-id"
-                  >
-                    <button
-                      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"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M14 7l-5 5 5 5V7z"
-                          />
-                          <path
-                            d="M24 0v24H0V0h24z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
-                      data-tc="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 17l5-5-5-5v10z"
-                          />
-                          <path
-                            d="M0 24V0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #20
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658650376"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Laura Stone 1 2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $305.17
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #19
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658650124"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Elizabeth Vaughn
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $1,215.89
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #18
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658650019"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                david.lawson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Draft
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $321.71
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #17
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658649864"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Aaron Randall
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $271.95
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #16
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658649610"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Laura Jensen
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $335.84
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #15
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658649336"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Jenna Villa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $1,042.15
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #14
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658649103"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Wesley Davis
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $213.69
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #13
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648921"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $367.03
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #12
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648750"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Denise Freeman
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $298.76
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #11
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648598"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                James Ball
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unfulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $663.69
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #10
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648409"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Michael Martinez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Cancelled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $280.41
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #9
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658648185"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Melissa Simon
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $234.93
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #8
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647953"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Justin Mccoy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $485.19
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #7
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647828"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $223.54
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #6
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647636"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Bradley Ford
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $237.55
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #5
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647420"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                David Lawson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $453.55
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658647230"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Lauren Watson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $812.67
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #3
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658646972"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Mark Lee
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-                >
-                  Unpaid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $481.41
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658646751"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Kara Murphy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $569.19
-              </td>
-            </tr>
-            <tr
-              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 Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                #1
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <time
-                  class=""
-                  datetime="1536658646314"
-                  title="Sep 11, 2018 5:37 AM"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                Curtis Bailey
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                >
-                  Fully paid
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-                >
-                  Partially fulfilled
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
-              >
-                $557.00
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Views / Pages / Page details default 1`] = `
 <div
   style="padding:24px"
@@ -85942,17 +84424,17 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -85974,9 +84456,6 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -86450,17 +84929,17 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -86482,9 +84961,6 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -86785,17 +85261,17 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Product Type"
               type="text"
               value=""
@@ -86817,9 +85293,6 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -87340,7 +85813,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -87458,7 +85931,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​
@@ -98330,6 +96803,99 @@ Ctrl + K"
                   </div>
                 </div>
               </div>
+              <div
+                class="MuiCardContent-root-id"
+              >
+                <div
+                  class="ProductImages-root-id"
+                >
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                    data-tc="product-image"
+                  >
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -98432,99 +96998,6 @@ Ctrl + K"
                   </div>
                 </div>
               </div>
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductImages-root-id"
-                >
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                    data-tc="product-image"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -100068,7 +98541,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​
@@ -100137,7 +98610,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -104524,7 +102997,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -104535,30 +103008,19 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -104580,9 +103042,6 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ProductList-tableContainer-id"
       >
@@ -105522,7 +103981,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Juice
+                  Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -105717,7 +104176,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Top (clothing)
+                  Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -105839,7 +104298,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Polo Shirt
+                      Black Hoodie
                     </div>
                   </div>
                 </td>
@@ -105904,7 +104363,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Black Hoodie
+                      Blue Hoodie
                     </div>
                   </div>
                 </td>
@@ -105969,7 +104428,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Blue Hoodie
+                      Mustard Hoodie
                     </div>
                   </div>
                 </td>
@@ -106034,7 +104493,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     <div
                       class="TableCellAvatar-children-id"
                     >
-                      Mustard Hoodie
+                      Polo Shirt
                     </div>
                   </div>
                 </td>
@@ -106042,7 +104501,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Top (clothing)
+                  Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -106107,7 +104566,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                   data-tc="product-type"
                 >
-                  Cushion
+                  Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
@@ -106239,7 +104698,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -106250,30 +104709,19 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -106294,10 +104742,18 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
             </fieldset>
           </div>
         </div>
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete Search
+          </span>
+        </button>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ProductList-tableContainer-id"
       >
@@ -106741,7 +105197,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id"
+        class="FilterBar-root-id"
       >
         <div>
           <button
@@ -106752,30 +105208,19 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
             <div
               class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
             >
-              Add Filter
+              Filters
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
           </button>
         </div>
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Products..."
               type="text"
               value=""
@@ -106797,9 +105242,6 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ProductList-tableContainer-id"
       >
@@ -107046,2116 +105488,6 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-    >
-      <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
-      >
-        Products
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Columns
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M7 10l5 5 5-5z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-tc="add-product"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Product
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id"
-            role="tablist"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Products
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterActions-actionContainer-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-            >
-              Add Filter
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id Filter-addFilterIcon-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          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 FilterActions-input-id"
-              placeholder="Search Products..."
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              style="padding-left:8px"
-            >
-              <legend
-                class="PrivateNotchedOutline-legend-id"
-                style="width:0.01px"
-              >
-                <span>
-                  ​
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterChips-filterContainer-id"
-      >
-        <div
-          class="FilterChips-filterChipContainer-id"
-        >
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 0
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 1
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 2
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 3
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 4
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 5
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 6
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 7
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 8
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 9
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 10
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 11
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property X is 12
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Y is 13
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="FilterChips-filterButton-id"
-          >
-            <div
-              class="MuiTypography-root-id FilterChips-filterText-id MuiTypography-body1-id"
-            >
-              Property Z is 14
-            </div>
-            <button
-              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ProductList-table-id"
-          >
-            <colgroup>
-              <col />
-              <col
-                class="ProductList-colName-id"
-              />
-              <col
-                class="ProductList-colType-id"
-              />
-              <col
-                class="ProductList-colPublished-id"
-              />
-              <col
-                class="ProductList-colPrice-id"
-              />
-            </colgroup>
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      <span
-                        class="ProductList-colNameHeader-id"
-                      >
-                        Name
-                      </span>
-                    </div>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="24"
-                        width="24"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Type
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Published
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Price
-                    </div>
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
-                  >
-                    <div
-                      class="TablePagination-spacer-id"
-                    >
-                      <div>
-                        <span
-                          class="RowNumberSelect-label-id"
-                        >
-                          No of Rows:
-                        </span>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
-                        >
-                          <div
-                            aria-haspopup="listbox"
-                            aria-labelledby=" "
-                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-id"
-                            role="button"
-                            tabindex="0"
-                          >
-                            20
-                          </div>
-                          <input
-                            type="hidden"
-                            value="20"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="TablePaginationActions-root-id"
-                    >
-                      <button
-                        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"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M14 7l-5 5 5 5V7z"
-                            />
-                            <path
-                              d="M24 0v24H0V0h24z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
-                        data-tc="button-pagination-next"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 17l5-5-5-5v10z"
-                            />
-                            <path
-                              d="M0 24V0h24v24H0z"
-                              fill="none"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Nebula Night Sky Paint
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $15.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Light Speed Yellow Paint
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $15.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Hyperspace Turquoise Paint
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $15.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Pineapple Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Coconut Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Apple Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Orange Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Banana Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Bean Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Carrot Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Green Juice
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $3.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Code Division T-shirt
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Polo Shirt
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Polo Shirt
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Polo Shirt
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Polo Shirt
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Black Hoodie
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Blue Hoodie
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Mustard Hoodie
-                    </div>
-                  </div>
-                </td>
-                <td
-                  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 ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $30.00
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-tc="id"
-                data-tc-id="UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
-                  data-tc="name"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Colored Parrot Cushion
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-tc="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-tc="isPublished"
-                  data-tc-is-published="true"
-                >
-                  <div
-                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                  >
-                    Published
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                >
-                  $20.00
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Views / Products / Product variant details attribute errors 1`] = `
 <div
   style="padding:24px"
@@ -115114,17 +111446,17 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -115146,9 +111478,6 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -115596,17 +111925,17 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -115628,9 +111957,6 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -115951,17 +112277,17 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Service Accounts"
               type="text"
               value=""
@@ -115983,9 +112309,6 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -124770,17 +121093,17 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Staff Member"
               type="text"
               value=""
@@ -124802,9 +121125,6 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -125439,17 +121759,17 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Staff Member"
               type="text"
               value=""
@@ -125471,9 +121791,6 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -127068,17 +123385,17 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="FilterActions-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Product"
               type="text"
               value=""
@@ -127100,9 +123417,6 @@ exports[`Storyshots Views / Translations / Entity list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -130952,17 +127266,17 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -130984,9 +127298,6 @@ exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -131375,17 +127686,17 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -131407,9 +127718,6 @@ exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >
@@ -131747,17 +128055,17 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
         </div>
       </div>
       <div
-        class="FilterActions-actionContainer-id FilterActions-searchOnly-id"
+        class="SearchBar-root-id"
       >
         <div
-          class="MuiFormControl-root-id MuiTextField-root-id FilterActions-root-id MuiFormControl-fullWidth-id"
+          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
           <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterActions-input-id"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
               placeholder="Search Webhooks"
               type="text"
               value=""
@@ -131779,9 +128087,6 @@ exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
           </div>
         </div>
       </div>
-      <hr
-        class="Hr-root-id"
-      />
       <div
         class="ResponsiveTable-root-id"
       >